Merge pull request #2401 from overleaf/cmg-ns-pretty-less

Fix inconsistent use of tabs and spaces in less files

GitOrigin-RevId: c69667f0dc6bc70ea3623890e2b2b741e358d454

services/web/frontend/stylesheets/_ol_style_includes.less

@@ -1,12 +1,12 @@
-@import "app/sidebar-v2-dash-pane.less";
-@import "app/front-chat-widget.less";
-@import "app/ol-chat.less";
-@import "app/templates-v2.less";
-@import "app/login-register.less";
-@import "app/review-features-page.less";
-@import "app/institution-hub.less";
-@import "app/publisher-hub.less";
-@import "app/admin-hub.less";
-@import "app/import.less";
-@import "components/lists.less";
-@import "components/overbox.less";
+@import 'app/sidebar-v2-dash-pane.less';
+@import 'app/front-chat-widget.less';
+@import 'app/ol-chat.less';
+@import 'app/templates-v2.less';
+@import 'app/login-register.less';
+@import 'app/review-features-page.less';
+@import 'app/institution-hub.less';
+@import 'app/publisher-hub.less';
+@import 'app/admin-hub.less';
+@import 'app/import.less';
+@import 'components/lists.less';
+@import 'components/overbox.less';

services/web/frontend/stylesheets/_style_includes.less

@@ -1,97 +1,97 @@
 @import url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
 
-@import "core/mixins.less";
+@import 'core/mixins.less';
 
 // Reset
-@import "core/normalize.less";
-@import "core/print.less";
+@import 'core/normalize.less';
+@import 'core/print.less';
 
 // Vendor CSS
-@import	(less) "vendor/pdfListView/TextLayer.css";
-@import	(less) "vendor/pdfListView/AnnotationsLayer.css";
-@import	(less) "vendor/pdfListView/HighlightsLayer.css";
-@import	(less) "vendor/select/select.css";
-@import (less) "vendor/codemirror.css";
-@import (less) "vendor/codemirror-dialog.css";
-@import (less) "vendor/codemirror-show-hint.css";
+@import (less) 'vendor/pdfListView/TextLayer.css';
+@import (less) 'vendor/pdfListView/AnnotationsLayer.css';
+@import (less) 'vendor/pdfListView/HighlightsLayer.css';
+@import (less) 'vendor/select/select.css';
+@import (less) 'vendor/codemirror.css';
+@import (less) 'vendor/codemirror-dialog.css';
+@import (less) 'vendor/codemirror-show-hint.css';
 
 // Core CSS
-@import "core/scaffolding.less";
-@import "core/type.less";
-@import "core/grid.less";
-@import "core/accessibility.less";
+@import 'core/scaffolding.less';
+@import 'core/type.less';
+@import 'core/grid.less';
+@import 'core/accessibility.less';
 
 // Components
-@import "components/tables.less";
-@import "components/forms.less";
-@import "components/buttons.less";
-@import "components/card.less";
+@import 'components/tables.less';
+@import 'components/forms.less';
+@import 'components/buttons.less';
+@import 'components/card.less';
 //@import "components/code.less";
-@import "components/component-animations.less";
-@import "components/dropdowns.less";
-@import "components/button-groups.less";
-@import "components/input-groups.less";
-@import "components/navs.less";
-@import "components/navbar.less";
-@import "components/footer.less";
+@import 'components/component-animations.less';
+@import 'components/dropdowns.less';
+@import 'components/button-groups.less';
+@import 'components/input-groups.less';
+@import 'components/navs.less';
+@import 'components/navbar.less';
+@import 'components/footer.less';
 //@import "components/breadcrumbs.less";
 //@import "components/pagination.less";
-@import "components/pager.less";
-@import "components/labels.less";
+@import 'components/pager.less';
+@import 'components/labels.less';
 //@import "components/badges.less";
 //@import "components/jumbotron.less";
-@import "components/thumbnails.less";
-@import "components/alerts.less";
-@import "components/progress-bars.less";
+@import 'components/thumbnails.less';
+@import 'components/alerts.less';
+@import 'components/progress-bars.less';
 // @import "components/media.less";
 // @import "components/list-group.less";
 // @import "components/panels.less";
 // @import "components/wells.less";
-@import "components/close.less";
-@import "components/fineupload.less";
-@import "components/hover.less";
-@import "components/ui-select.less";
-@import "components/input-suggestions.less";
-@import "components/nvd3.less";
-@import "components/nvd3_override.less";
+@import 'components/close.less';
+@import 'components/fineupload.less';
+@import 'components/hover.less';
+@import 'components/ui-select.less';
+@import 'components/input-suggestions.less';
+@import 'components/nvd3.less';
+@import 'components/nvd3_override.less';
 
 // Components w/ JavaScript
-@import "components/modals.less";
-@import "components/tooltip.less";
-@import "components/popovers.less";
-@import "components/carousel.less";
-@import "components/daterange-picker";
+@import 'components/modals.less';
+@import 'components/tooltip.less';
+@import 'components/popovers.less';
+@import 'components/carousel.less';
+@import 'components/daterange-picker';
 
 // ngTagsInput
-@import "components/tags-input.less";
+@import 'components/tags-input.less';
 
 // Utility classes
-@import "core/utilities.less";
-@import "core/responsive-utilities.less";
+@import 'core/utilities.less';
+@import 'core/responsive-utilities.less';
 
 // ShareLaTeX app classes
-@import "app/base.less";
-@import "app/account-settings.less";
-@import "app/beta-program.less";
-@import "app/about-page.less";
-@import "app/project-list.less";
-@import "app/editor.less";
-@import "app/homepage.less";
-@import "app/plans.less";
-@import "app/recurly.less";
-@import "app/bonus.less";
-@import "app/register.less";
-@import "app/blog.less";
-@import "app/features.less";
-@import "app/templates.less";
-@import "app/wiki.less";
-@import "app/translations.less";
-@import "app/contact-us.less";
-@import "app/subscription.less";
-@import "app/sprites.less";
-@import "app/invite.less";
-@import "app/error-pages.less";
-@import "app/v1-badge.less";
-@import "app/editor/history-v2.less";
-@import "app/metrics.less";
-@import "app/open-in-overleaf.less";
+@import 'app/base.less';
+@import 'app/account-settings.less';
+@import 'app/beta-program.less';
+@import 'app/about-page.less';
+@import 'app/project-list.less';
+@import 'app/editor.less';
+@import 'app/homepage.less';
+@import 'app/plans.less';
+@import 'app/recurly.less';
+@import 'app/bonus.less';
+@import 'app/register.less';
+@import 'app/blog.less';
+@import 'app/features.less';
+@import 'app/templates.less';
+@import 'app/wiki.less';
+@import 'app/translations.less';
+@import 'app/contact-us.less';
+@import 'app/subscription.less';
+@import 'app/sprites.less';
+@import 'app/invite.less';
+@import 'app/error-pages.less';
+@import 'app/v1-badge.less';
+@import 'app/editor/history-v2.less';
+@import 'app/metrics.less';
+@import 'app/open-in-overleaf.less';

services/web/frontend/stylesheets/app/about-page.less

@@ -1,8 +1,9 @@
 .team-profile {
-	clear: both;
-	.img-container {
-		float: left;
-		overflow: hidden;
-		margin: (@line-height-computed / 4) @line-height-computed @line-height-computed (@line-height-computed / 2);
-	}
-}
+  clear: both;
+  .img-container {
+    float: left;
+    overflow: hidden;
+    margin: (@line-height-computed / 4) @line-height-computed
+      @line-height-computed (@line-height-computed / 2);
+  }
+}

services/web/frontend/stylesheets/app/about.less

@@ -30,4 +30,4 @@
       }
     }
   }
-}
+}

services/web/frontend/stylesheets/app/admin-hub.less

@@ -5,34 +5,34 @@
   width: @size;
   height: @size;
   text-align: center;
-  padding-top: @size/6.4;
+  padding-top: @size / 6.4;
   img {
-    height: @size - @size/3.2;
+    height: @size - @size / 3.2;
   }
 }
 
 .hub-header {
-    h2 {
-        display: inline-block;
-    }
-    a {
-        color: @ol-dark-green;
-    }
-    i {
-        font-size: 30px;
-    }
-    .dropdown {
-        margin-right: 10px;
-    }
+  h2 {
+    display: inline-block;
+  }
+  a {
+    color: @ol-dark-green;
+  }
+  i {
+    font-size: 30px;
+  }
+  .dropdown {
+    margin-right: 10px;
+  }
 }
 .admin-item {
   position: relative;
   margin-bottom: 60px;
   .section-title {
-      text-transform: capitalize;
+    text-transform: capitalize;
   }
   .alert-danger {
-      color: @ol-red;
+    color: @ol-red;
   }
 }
 .hidden-chart-section {
@@ -56,7 +56,8 @@
   line-height: 40px;
   color: @accent-color-secondary;
 }
-.hub-big-number, .hub-number-label {
+.hub-big-number,
+.hub-number-label {
   display: block;
 }
 .hub-metric-link {
@@ -64,10 +65,10 @@
   top: 9px;
   right: 0;
   a {
-      color: @accent-color-secondary;
+    color: @accent-color-secondary;
   }
   i {
-      margin-right: 5px;
+    margin-right: 5px;
   }
 }
 .custom-donut-container {
@@ -84,7 +85,7 @@
   }
 
   .nv-legend-text {
-    font-family: @font-family-sans-serif; 
+    font-family: @font-family-sans-serif;
     font-size: 14px;
   }
 }

services/web/frontend/stylesheets/app/base.less

@@ -6,94 +6,104 @@
 }
 
 .system-message .close when (@is-overleaf = true) {
-  color: #FFF;
+  color: #fff;
   opacity: 1;
   text-shadow: none;
 }
 
 .clickable {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .img-circle {
-	display: inline-block;
-	overflow: hidden;
-	border-radius: 50%;
-	width: @line-height-computed * 4;
-	height: @line-height-computed * 4;
-	img {
-		margin-top: -10px;
-	}
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 50%;
+  width: @line-height-computed * 4;
+  height: @line-height-computed * 4;
+  img {
+    margin-top: -10px;
+  }
 }
 
 @-webkit-keyframes bounce {
-  0%, 10%, 26%, 40%, 50% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
+  0%,
+  10%,
+  26%,
+  40%,
+  50% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
-  20%, 21% {
-    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+  20%,
+  21% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0);
   }
 
   35% {
-    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -5px, 0);
     transform: translate3d(0, -5px, 0);
   }
 
   45% {
-    -webkit-transform: translate3d(0,-2px,0);
-    transform: translate3d(0,-2px,0);
+    -webkit-transform: translate3d(0, -2px, 0);
+    transform: translate3d(0, -2px, 0);
   }
-  
+
   50% {
-    -webkit-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 
 @keyframes bounce {
-  0%, 10%, 26%, 40%, 50% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
+  0%,
+  10%,
+  26%,
+  40%,
+  50% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
-  20%, 21% {
-    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+  20%,
+  21% {
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -10px, 0);
     -ms-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0);
   }
 
   35% {
-    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -5px, 0);
     -ms-transform: translate3d(0, -5px, 0);
     transform: translate3d(0, -5px, 0);
   }
 
   45% {
-    -webkit-transform: translate3d(0,-2px,0);
-    -ms-transform: translate3d(0,-2px,0);
-    transform: translate3d(0,-2px,0);
+    -webkit-transform: translate3d(0, -2px, 0);
+    -ms-transform: translate3d(0, -2px, 0);
+    transform: translate3d(0, -2px, 0);
   }
 
   50% {
-    -webkit-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 
@@ -113,4 +123,4 @@
 
 .grecaptcha-badge {
   display: none;
-}
+}

services/web/frontend/stylesheets/app/beta-program.less

@@ -1,21 +1,21 @@
 .beta-opt-in-wrapper {
-	min-height: 400px;
+  min-height: 400px;
 }
 
 .beta-opt-in {
-	.form-group {
-		margin-top: 15px;
-	}
+  .form-group {
+    margin-top: 15px;
+  }
 }
 
 .beta-feature-badge {
-	&:extend(.label);
-	&:extend(.label-warning);
-	vertical-align: 11%;
-	padding-bottom: 4px;
-	padding-top: 2px;
-	margin-left: 12px;
-	&:before {
-		content: "β";
-	}
-}
+  &:extend(.label);
+  &:extend(.label-warning);
+  vertical-align: 11%;
+  padding-bottom: 4px;
+  padding-top: 2px;
+  margin-left: 12px;
+  &:before {
+    content: 'β';
+  }
+}

services/web/frontend/stylesheets/app/blog-posts.less

@@ -57,4 +57,4 @@
       font-size: small;
     }
   }
-}
+}

services/web/frontend/stylesheets/app/blog.less

@@ -1,59 +1,59 @@
 .author_details {
-	font-size: .8em;
-	color: @gray;
+  font-size: 0.8em;
+  color: @gray;
 }
 
 .post {
-	img {
-		border-radius: 3px;
-		-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-		max-width: 100%;    
-		height: auto;
-	}
+  img {
+    border-radius: 3px;
+    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 .blog {
-	iframe {
-		width: 100%;
-	}
-	> .page-header {
-		h1 {
-			margin: 0;
-		}
-		padding: 0;
-		margin: 0;
-		border: none;
-	}
-	
-	.post {
-		.page-header {
-			h2 {
-				margin-top: 0;
-			}
-		}
-	}
-	
-	.page-header {
-		h1 {
-			a {
-				color: @text-color;
-			}
-			.small {
-				color: @gray-dark;
-				font-size: 16px;
-				display: inline-block;
-				float: right;
-				margin-top: 22px;
-			}
-		}
-	}
-	
-	.blurb {
-		ul {
-			li {
-				margin-bottom: @line-height-computed / 4;
-			}
-		}
-	}
+  iframe {
+    width: 100%;
+  }
+  > .page-header {
+    h1 {
+      margin: 0;
+    }
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+
+  .post {
+    .page-header {
+      h2 {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .page-header {
+    h1 {
+      a {
+        color: @text-color;
+      }
+      .small {
+        color: @gray-dark;
+        font-size: 16px;
+        display: inline-block;
+        float: right;
+        margin-top: 22px;
+      }
+    }
+  }
+
+  .blurb {
+    ul {
+      li {
+        margin-bottom: @line-height-computed / 4;
+      }
+    }
+  }
 }

services/web/frontend/stylesheets/app/bonus.less

@@ -1,127 +1,124 @@
-@twitter-color    : #1DA1F2;
-@facebook-color   : #3B5998;
-@email-color      : #808B9A;
+@twitter-color : #1DA1F2;
+@facebook-color : #3B5998;
+@email-color : #808B9A;
 @link-to-us-color : #406EB3;
 
 .bonus {
-	margin-top: 15px;
-	.page-header h1 {
-		text-align: center;
-	}
+  margin-top: 15px;
+  .page-header h1 {
+    text-align: center;
+  }
 
-	h2 {
-		text-align: center;
-		font-size: 20px;
-		line-height: 28px;
-		margin-bottom: @line-height-computed;
-		margin-top: 0;
-		&.direct-link {
-			margin-top: @line-height-computed;
-		}
-	}
+  h2 {
+    text-align: center;
+    font-size: 20px;
+    line-height: 28px;
+    margin-bottom: @line-height-computed;
+    margin-top: 0;
+    &.direct-link {
+      margin-top: @line-height-computed;
+    }
+  }
 
-	.bonus-banner {
-		.bonus-top {
-			border-bottom: 1px solid lighten(@blue, 40%);
-		}
-		.title {
-			a {
-				display: flex;
-				align-items: center;
-				font-size: 18px;
-				padding: 20px;
-				background-color: white;
-				border-bottom: 1px solid lighten(@blue, 40%);
-				color: @blue;
-				> i {
-					margin-right: 10px;
-				}
-				&:hover,
-				&:focus {
-					background-color: lighten(@blue, 45%);
-					text-decoration: none;
-				}
+  .bonus-banner {
+    .bonus-top {
+      border-bottom: 1px solid lighten(@blue, 40%);
+    }
+    .title {
+      a {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        padding: 20px;
+        background-color: white;
+        border-bottom: 1px solid lighten(@blue, 40%);
+        color: @blue;
+        > i {
+          margin-right: 10px;
+        }
+        &:hover,
+        &:focus {
+          background-color: lighten(@blue, 45%);
+          text-decoration: none;
+        }
+      }
+    }
+    a.twitter > i {
+      color: @twitter-color;
+    }
+    a.facebook > i {
+      color: @facebook-color;
+    }
+    a.email > i {
+      color: @email-color;
+    }
+    a.link > i {
+      color: @link-to-us-color;
+    }
+    h2.direct-link {
+    }
+  }
 
-			}
-		}
-		a.twitter > i {
-			color: @twitter-color;
-		}
-		a.facebook > i {
-			color: @facebook-color;
-		}
-		a.email > i {
-			color: @email-color;
-		}
-		a.link > i {
-			color: @link-to-us-color;
-		}
-		h2.direct-link {
-		}
-	}
+  p.thanks {
+    font-size: 18px;
+    line-height: 28px;
+    margin-top: 10px;
+    text-align: center;
+  }
 
-	p.thanks {
-		font-size: 18px;
-		line-height: 28px;
-		margin-top: 10px;
-		text-align: center;
-	}
+  .number {
+    position: absolute;
+    margin-left: -13px;
+    width: 26px;
+    padding: 3px 0;
+    text-align: center;
+    background-color: #ddd;
+    &.active {
+      background-color: @blue;
+      color: white;
+    }
+    border-radius: 3px;
+  }
 
-	.number {
-		position: absolute;
-		margin-left: -13px;
-		width: 26px;
-		padding: 3px 0;
-		text-align: center;
-		background-color: #ddd;
-		&.active {
-			background-color: @blue;
-			color: white;
-		}
-		border-radius: 3px;
-	}
-
-	.progress {
-		margin-top: @line-height-computed / 2;
-		margin-left: -15px;
-		margin-right: -15px;
-		height: 30px;
-	}
-
-	.perk {
-		position: absolute;
-		background-color: #ddd;
-		border-radius: 5px;
-		text-align: center;
-		padding: 5px 5px;
-		width: 110px;
-		margin-left: -50px;
-		font-size: 14px;
-		&:before {
-			border-bottom: 8px solid #ddd;
-			border-left: 8px solid transparent;
-			border-right: 8px solid transparent;
-			content: '';
-			position: absolute;
-			left: 42px;
-			top: -8px;
-		}
-		&.active {
-			color: white;
-			background-color: @blue;
-			&:before {
-				border-bottom: 8px solid @blue;
-			}
-		}
-	}
+  .progress {
+    margin-top: @line-height-computed / 2;
+    margin-left: -15px;
+    margin-right: -15px;
+    height: 30px;
+  }
 
+  .perk {
+    position: absolute;
+    background-color: #ddd;
+    border-radius: 5px;
+    text-align: center;
+    padding: 5px 5px;
+    width: 110px;
+    margin-left: -50px;
+    font-size: 14px;
+    &:before {
+      border-bottom: 8px solid #ddd;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      content: '';
+      position: absolute;
+      left: 42px;
+      top: -8px;
+    }
+    &.active {
+      color: white;
+      background-color: @blue;
+      &:before {
+        border-bottom: 8px solid @blue;
+      }
+    }
+  }
 }
 
 .link-modal {
-	text-align: center;
-	textarea {
-		width: 95%;
-		margin-bottom: 0;
-	}
+  text-align: center;
+  textarea {
+    width: 95%;
+    margin-bottom: 0;
+  }
 }
-

services/web/frontend/stylesheets/app/cms-page.less

@@ -96,7 +96,8 @@
     table {
       background: white;
       max-width: none;
-      th, td {
+      th,
+      td {
         border: 1px solid @gray-lighter;
         padding: @padding-sm;
         text-align: center;
@@ -104,21 +105,25 @@
       }
     }
   }
-  .table-styled, .features-table {
-    .fa-check-square, .fa-check {
+  .table-styled,
+  .features-table {
+    .fa-check-square,
+    .fa-check {
       color: @ol-green;
     }
   }
   .features-table {
     background: white;
     max-width: none;
-    th, td {
+    th,
+    td {
       border: 1px solid @gray-lighter;
       hyphens: auto;
       padding: @padding-sm;
       text-align: center;
     }
-    th, td {
+    th,
+    td {
       width: 20%;
     }
     .btn {
@@ -127,7 +132,8 @@
       word-wrap: break-word;
     }
     &.left-align-first-col {
-      td, th {
+      td,
+      th {
         text-align: left;
       }
       td + td,
@@ -139,7 +145,8 @@
       display: none;
     }
     @media screen and (max-width: @screen-xs-max) {
-      tbody, thead {
+      tbody,
+      thead {
         display: block;
       }
       tr {
@@ -148,14 +155,15 @@
         justify-content: space-around;
       }
 
-      td, th {
+      td,
+      th {
         display: block;
         width: 25%;
       }
       tr:first-child {
         th {
           width: 50%;
-        }  
+        }
         th:first-child {
           width: 100%;
         }
@@ -166,7 +174,7 @@
         background: #efefef;
         width: 100%;
       }
-      
+
       .hidden-row-xs {
         display: none;
       }
@@ -240,4 +248,4 @@
     height: auto;
     max-width: 100%;
   }
-}
+}

services/web/frontend/stylesheets/app/contact-us.less

@@ -1,59 +1,58 @@
 .contact-us-modal {
-
-	textarea {
-		height: 120px;
-	}
+  textarea {
+    height: 120px;
+  }
 }
 
 .contact-suggestions {
-	margin: 0 -20px 10px;
-	padding: 10px 0;
-	color: @gray-dark;
-	background-color: @gray-lightest;
-	border-top: solid 1px @gray-lighter;
-	border-bottom: solid 1px @gray-lighter;
-	font-size: 0.9rem;
+  margin: 0 -20px 10px;
+  padding: 10px 0;
+  color: @gray-dark;
+  background-color: @gray-lightest;
+  border-top: solid 1px @gray-lighter;
+  border-bottom: solid 1px @gray-lighter;
+  font-size: 0.9rem;
+}
+
+.contact-suggestion-label {
+  margin-bottom: 10px;
+  padding: 0 20px;
 }
 
-	.contact-suggestion-label {
-		margin-bottom: 10px;
-		padding: 0 20px;
-	}
-
-	.contact-suggestion-list {
-		.list-unstyled();
-		background-color: #FFF;
-		border-top: solid 1px @gray-lighter;
-		border-bottom: solid 1px @gray-lighter;
-		margin: 0;
-
-		li:last-child .contact-suggestion-list-item {
-			border-bottom: none;
-		}
-	}
-
-		.contact-suggestion-list-item {
-			display: table;
-    		width: 100%;
-			color: @dropdown-link-color;
-			padding: 10px 20px; 
-			border-bottom: solid 1px lighten(@gray-lighter, 10%);
-			cursor: pointer;
-
-			&:hover,
-			&:focus {
-				text-decoration: none;
-				color: @dropdown-link-hover-color!important;
-				background-color: @dropdown-link-hover-bg;
-
-				.fa {
-					color: inherit;
-				}
-			}
-
-			.fa {
-				display: table-cell;
-				text-align: right;
-				color: @gray-lighter;
-			}
-		}
+.contact-suggestion-list {
+  .list-unstyled();
+  background-color: #fff;
+  border-top: solid 1px @gray-lighter;
+  border-bottom: solid 1px @gray-lighter;
+  margin: 0;
+
+  li:last-child .contact-suggestion-list-item {
+    border-bottom: none;
+  }
+}
+
+.contact-suggestion-list-item {
+  display: table;
+  width: 100%;
+  color: @dropdown-link-color;
+  padding: 10px 20px;
+  border-bottom: solid 1px lighten(@gray-lighter, 10%);
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @dropdown-link-hover-color!important;
+    background-color: @dropdown-link-hover-bg;
+
+    .fa {
+      color: inherit;
+    }
+  }
+
+  .fa {
+    display: table-cell;
+    text-align: right;
+    color: @gray-lighter;
+  }
+}

services/web/frontend/stylesheets/app/content_page.less

@@ -28,7 +28,7 @@
   */
   section {
     padding: @line-height-computed (@grid-gutter-width / 2);
-    
+
     &.color-block {
       &.green-dark {
         background-color: @ol-dark-green;
@@ -47,7 +47,7 @@
       margin: 0 auto;
       /* match .col-sm-10 */
       /* @grid-gutter-width  is used for margins */
-      max-width: (@screen-sm * (10/12)) -  @grid-gutter-width;
+      max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
       @media (min-width: @screen-md-min) {
         max-width: (@screen-md * (10/12)) - @grid-gutter-width;
       }
@@ -86,10 +86,10 @@
   /*
     lists
   */
-  
+
   .list-without-style {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-}
+}

services/web/frontend/stylesheets/app/editor.less

@@ -1,216 +1,215 @@
-@import "./editor/file-tree.less";
-@import "./editor/history.less";
-@import "./editor/toolbar.less";
-@import "./editor/left-menu.less";
-@import "./editor/pdf.less";
-@import "./editor/share.less";
-@import "./editor/chat.less";
-@import "./editor/binary-file.less";
-@import "./editor/search.less";
-@import "./editor/publish-template.less";
-@import "./editor/online-users.less";
-@import "./editor/hotkeys.less";
-@import "./editor/review-panel.less";
-@import "./editor/rich-text.less";
-@import "./editor/publish-modal.less";
+@import './editor/file-tree.less';
+@import './editor/history.less';
+@import './editor/toolbar.less';
+@import './editor/left-menu.less';
+@import './editor/pdf.less';
+@import './editor/share.less';
+@import './editor/chat.less';
+@import './editor/binary-file.less';
+@import './editor/search.less';
+@import './editor/publish-template.less';
+@import './editor/online-users.less';
+@import './editor/hotkeys.less';
+@import './editor/review-panel.less';
+@import './editor/rich-text.less';
+@import './editor/publish-modal.less';
 
 @ui-layout-toggler-def-height: 50px;
 @ui-resizer-size: 7px;
 
 @keyframes blink {
-	0% { 
-		opacity: 0.2;
-	}
-	20% { 
-		opacity: 1;
-	}
-	100% { 
-		opacity: 0.2;
-	}
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
 }
 
 .editor-menu-icon when (@is-overleaf = true) {
-	&.fa {
-		width: 1em;
-		background: @editor-header-logo-background;
-		
-		&::before {
-			// Disable the font-awesome icon when in Overleaf by replacing it with a
-			// non-breakable space instead (otherwise the browser would render a 
-			// zero-width element).
-			content: "\00a0"; 
-		}
-	}
+  &.fa {
+    width: 1em;
+    background: @editor-header-logo-background;
+
+    &::before {
+      // Disable the font-awesome icon when in Overleaf by replacing it with a
+      // non-breakable space instead (otherwise the browser would render a
+      // zero-width element).
+      content: '\00a0';
+    }
+  }
 }
 
 .full-size {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .global-alerts {
-	height: 0;
-	margin-top: 2px;
-	text-align: center;
-
-	.alert {
-		display: inline-block;
-		text-align: left;
-		min-width: 400px;
-		padding: @global-alerts-padding;
-		font-size: 14px;
-		margin-bottom: (@line-height-computed / 4);
-		position: relative;
-		z-index: 20;
-	}
-}
-	#try-reconnect-now-button {
-		margin-left: 20px;
-	}
-
-	#synctex-more-info-button {
-		margin-left: 20px;
-	}
+  height: 0;
+  margin-top: 2px;
+  text-align: center;
 
-#ide-body {
-	.full-size;
-	top: @ide-body-top-offset;
-	&.ide-history-open {
-		top: @ide-body-top-offset + @editor-toolbar-height;
-	}
+  .alert {
+    display: inline-block;
+    text-align: left;
+    min-width: 400px;
+    padding: @global-alerts-padding;
+    font-size: 14px;
+    margin-bottom: (@line-height-computed / 4);
+    position: relative;
+    z-index: 20;
+  }
+}
+#try-reconnect-now-button {
+  margin-left: 20px;
 }
 
+#synctex-more-info-button {
+  margin-left: 20px;
+}
 
-#editor, #editor-rich-text {
-	.full-size;
-	top: 32px;
+#ide-body {
+  .full-size;
+  top: @ide-body-top-offset;
+  &.ide-history-open {
+    top: @ide-body-top-offset + @editor-toolbar-height;
+  }
 }
 
+#editor,
 #editor-rich-text {
-	top: @editor-toolbar-height;
+  .full-size;
+  top: 32px;
+}
+
+#editor-rich-text {
+  top: @editor-toolbar-height;
 }
 
 .toolbar-editor {
-	height: @editor-toolbar-height;
-	background-color: @editor-toolbar-bg;
-	padding: 0 5px;
-	overflow: hidden;
-	position: relative;
-	z-index: 10; // Prevent track changes showing over toolbar
+  height: @editor-toolbar-height;
+  background-color: @editor-toolbar-bg;
+  padding: 0 5px;
+  overflow: hidden;
+  position: relative;
+  z-index: 10; // Prevent track changes showing over toolbar
 }
 
 .loading-screen {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	background-color: #FFF;
-}
-	.loading-screen-brand-container {
-		width: 15%;
-		min-width: 200px;
-		text-align: center;
-	}
-		.loading-screen-brand {
-			position: relative;
-			width: 100%;
-			padding-top: @editor-loading-logo-padding-top;
-			height: 0;
-			background: @editor-loading-logo-background-url no-repeat bottom / 100%;
-
-			&::after {
-				content: '';
-				position: absolute;
-				height: inherit;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				background: @editor-loading-logo-foreground-url no-repeat bottom / 100%;
-				transition: height .5s;
-			}
-		}
-		.loading-screen-label {
-			margin: 0;
-			padding-top: 1em;
-			font-size: 2em;
-			color: @gray-dark;
-		}
-			.loading-screen-ellip {
-				animation: blink 1.4s both infinite;
-				&:nth-child(2) {
-					animation-delay: 0.2s;
-				}
-				&:nth-child(3) {
-					animation-delay: 0.4s;
-				}
-			}
-
-		.loading-screen-error {
-			margin: 0;
-			padding-top: 1em;
-			color: @state-danger-text;
-		}
-
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.loading-screen-brand-container {
+  width: 15%;
+  min-width: 200px;
+  text-align: center;
+}
+.loading-screen-brand {
+  position: relative;
+  width: 100%;
+  padding-top: @editor-loading-logo-padding-top;
+  height: 0;
+  background: @editor-loading-logo-background-url no-repeat bottom / 100%;
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: inherit;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: @editor-loading-logo-foreground-url no-repeat bottom / 100%;
+    transition: height 0.5s;
+  }
+}
+.loading-screen-label {
+  margin: 0;
+  padding-top: 1em;
+  font-size: 2em;
+  color: @gray-dark;
+}
+.loading-screen-ellip {
+  animation: blink 1.4s both infinite;
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}
+
+.loading-screen-error {
+  margin: 0;
+  padding-top: 1em;
+  color: @state-danger-text;
+}
 
 .loading-panel {
-	.full-size;
-	padding-top: 10rem;
-	font-family: @font-family-serif;
-	text-align: center;
-	background-color: #fafafa;
+  .full-size;
+  padding-top: 10rem;
+  font-family: @font-family-serif;
+  text-align: center;
+  background-color: #fafafa;
 }
 
 .error-panel {
-	.full-size;
-	padding: @line-height-computed;
-	background-color: #fafafa;
-	.alert {
-		max-width: 400px;
-		margin: auto;
-	}
+  .full-size;
+  padding: @line-height-computed;
+  background-color: #fafafa;
+  .alert {
+    max-width: 400px;
+    margin: auto;
+  }
 }
 
 .project-name {
-	.name {
-		display: inline-block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		vertical-align: top;
-		padding: 6px;
-		color: @project-name-color;
-		font-weight: 700;
-		white-space: nowrap;
-	}
-	input {
-		height: 30px;
-		margin-top: 4px;
-		text-align: center;
-		padding: 6px;
-		font-weight: 700;
-		max-width: 500px;
-	}
-	a.rename {
-		visibility: hidden;
-		display: inline-block;
-		color: @project-rename-link-color;
-		padding: 5px;
-		border-radius: @border-radius-small;
-		&:hover {
-			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-			color: @project-rename-link-color-hover;
-			text-decoration: none;
-		}
-	}
-	&:hover {
-		a.rename {
-			visibility: visible;
-		}
-	}
+  .name {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    padding: 6px;
+    color: @project-name-color;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+  input {
+    height: 30px;
+    margin-top: 4px;
+    text-align: center;
+    padding: 6px;
+    font-weight: 700;
+    max-width: 500px;
+  }
+  a.rename {
+    visibility: hidden;
+    display: inline-block;
+    color: @project-rename-link-color;
+    padding: 5px;
+    border-radius: @border-radius-small;
+    &:hover {
+      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+      color: @project-rename-link-color-hover;
+      text-decoration: none;
+    }
+  }
+  &:hover {
+    a.rename {
+      visibility: visible;
+    }
+  }
 }
 
 /**************************************
@@ -219,435 +218,437 @@ Ace
 
 // The internal components of the aceEditor directive
 .ace-editor-wrapper {
-	.full-size;
-	.undo-conflict-warning {
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		z-index: 10;
-	}
-	.ace-editor-body {
-		width: 100%;
-		height: 100%;
-	}
-	.spelling-highlight {
-		position: absolute;
-		background-image: url(/img/spellcheck-underline.png);
-		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-			background-image: url(/img/spellcheck-underline@2x.png);
-			background-size: 5px 4px;
-		}
-		background-repeat: repeat-x;
-		background-position: bottom left;
-	}
-	.remote-cursor {
-		position: absolute;
-		border-left: 2px solid transparent;
-		// Adds "nubbin" top right of cursor, which inherits the injected color
-		&::before {
-			content: '';
-			position: absolute;
-			left: -2px;
-			top: -5px;
-			height: 5px;
-			width: 5px;
-			border-top-width: 3px;
-			border-right-width: 3px;
-			border-bottom-width: 2px;
-			border-left-width: 2px;
-			border-style: solid;
-			border-color: inherit;
-		}
-	}
-	.annotation-label {
-		padding: (@line-height-computed / 4) (@line-height-computed / 2);
-		font-size: 0.8rem;
-		z-index: 100;
-		font-family: @font-family-sans-serif;
-		color: white;
-		font-weight: 700;
-		white-space: nowrap;
-	}
-	.annotation {
-		position: absolute;
-		z-index: 2;
-	}
-	.highlights-before-label, .highlights-after-label {
-		position: absolute;
-		right: @line-height-computed;
-		z-index: 1;
-	}
-	.highlights-before-label {
-		top:   @line-height-computed / 2;
-	}
-	.highlights-after-label {
-		bottom: @line-height-computed / 2;
-	}
+  .full-size;
+  .undo-conflict-warning {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 10;
+  }
+  .ace-editor-body {
+    width: 100%;
+    height: 100%;
+  }
+  .spelling-highlight {
+    position: absolute;
+    background-image: url(/img/spellcheck-underline.png);
+    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+      background-image: url(/img/spellcheck-underline@2x.png);
+      background-size: 5px 4px;
+    }
+    background-repeat: repeat-x;
+    background-position: bottom left;
+  }
+  .remote-cursor {
+    position: absolute;
+    border-left: 2px solid transparent;
+    // Adds "nubbin" top right of cursor, which inherits the injected color
+    &::before {
+      content: '';
+      position: absolute;
+      left: -2px;
+      top: -5px;
+      height: 5px;
+      width: 5px;
+      border-top-width: 3px;
+      border-right-width: 3px;
+      border-bottom-width: 2px;
+      border-left-width: 2px;
+      border-style: solid;
+      border-color: inherit;
+    }
+  }
+  .annotation-label {
+    padding: (@line-height-computed / 4) (@line-height-computed / 2);
+    font-size: 0.8rem;
+    z-index: 100;
+    font-family: @font-family-sans-serif;
+    color: white;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+  .annotation {
+    position: absolute;
+    z-index: 2;
+  }
+  .highlights-before-label,
+  .highlights-after-label {
+    position: absolute;
+    right: @line-height-computed;
+    z-index: 1;
+  }
+  .highlights-before-label {
+    top: @line-height-computed / 2;
+  }
+  .highlights-after-label {
+    bottom: @line-height-computed / 2;
+  }
 }
 
 .strike-through-foreground::after {
-	content: '';
-	position: absolute;
-	width: 100%;
-	top: 50%;
-	margin-top: -1px;
-	height: 2px;
-	background: currentColor;
+  content: '';
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  margin-top: -1px;
+  height: 2px;
+  background: currentColor;
 }
 
 // Hack to solve an issue where scrollbars aren't visible in Safari.
-// Safari seems to clip part of the scrollbar element. By giving the 
-// element a background, we're telling Safari that it *really* needs to 
+// Safari seems to clip part of the scrollbar element. By giving the
+// element a background, we're telling Safari that it *really* needs to
 // paint the whole area. See https://github.com/ajaxorg/ace/issues/2872
 .ace_scrollbar-inner {
-	background-color: #FFF;
-	opacity: 0.01;
+  background-color: #fff;
+  opacity: 0.01;
 
-	.ace_dark & {
-		background-color: #000;
-	}
+  .ace_dark & {
+    background-color: #000;
+  }
 }
 
 /**************************************
 CodeMirror
 ***************************************/
 .cm-editor-wrapper {
-	position: relative;
-	height: 100%;
+  position: relative;
+  height: 100%;
 }
 
 .cm-editor-body {
-	height: 100%;
+  height: 100%;
 }
 
 // CM (for some reason) has height set to 300px in it's stylesheet
 .CodeMirror {
-	height: 100%;
+  height: 100%;
 }
 
 .ui-layout-resizer when (@is-overleaf = false) {
-	width: 6px;
-	background-color: @editor-resizer-bg-color;
-	border-left: 1px solid @editor-border-color;
-	border-right: 1px solid @editor-border-color;
-	.ui-layout-toggler {
-		color: #999;
-		font-family: FontAwesome;
-		font-style: normal;
-		font-weight: normal;
-		line-height: 1;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		font-size: 16px !important;
-		line-height: 50px;
-		background-color: @editor-toggler-bg-color;
-		&:hover {
-			background-color: @editor-toggler-hover-bg-color;
-			color: #333;
-		}
-	}
+  width: 6px;
+  background-color: @editor-resizer-bg-color;
+  border-left: 1px solid @editor-border-color;
+  border-right: 1px solid @editor-border-color;
+  .ui-layout-toggler {
+    color: #999;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 16px !important;
+    line-height: 50px;
+    background-color: @editor-toggler-bg-color;
+    &:hover {
+      background-color: @editor-toggler-hover-bg-color;
+      color: #333;
+    }
+  }
 }
 
 .ui-layout-resizer when (@is-overleaf = true) {
-	width: @ui-resizer-size !important;
-	background-color: @editor-resizer-bg-color;
-	&.ui-layout-resizer-closed {
-		&::before,
-		&::after {
-			content: none;
-		}
-	}
-
-	&::before,
-	&::after {
-		content: '\2847';
-		display: block;
-		position: absolute;
-		text-align: center;
-		left: -2px;
-		-webkit-font-smoothing: antialiased;
-		width: 100%;
-		font-size: 24px;
-		top: 25%;
-		color: @ol-blue-gray-2;
-	}
-	&::after {
-		top: 75%;
-	}
-}
-
-.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
-	.ui-layout-toggler when (@is-overleaf = false) {
-		&:before {
-			content: "\f104"
-		}
-	}
-}
-.ui-layout-resizer-east.ui-layout-resizer-open, .ui-layout-resizer-west.ui-layout-resizer-closed {
-	.ui-layout-toggler when (@is-overleaf = false) {
-		&:before {
-			content: "\f105"
-		}
-	}
+  width: @ui-resizer-size !important;
+  background-color: @editor-resizer-bg-color;
+  &.ui-layout-resizer-closed {
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+
+  &::before,
+  &::after {
+    content: '\2847';
+    display: block;
+    position: absolute;
+    text-align: center;
+    left: -2px;
+    -webkit-font-smoothing: antialiased;
+    width: 100%;
+    font-size: 24px;
+    top: 25%;
+    color: @ol-blue-gray-2;
+  }
+  &::after {
+    top: 75%;
+  }
+}
+
+.ui-layout-resizer-west.ui-layout-resizer-open,
+.ui-layout-resizer-east.ui-layout-resizer-closed {
+  .ui-layout-toggler when (@is-overleaf = false) {
+    &:before {
+      content: '\f104';
+    }
+  }
+}
+.ui-layout-resizer-east.ui-layout-resizer-open,
+.ui-layout-resizer-west.ui-layout-resizer-closed {
+  .ui-layout-toggler when (@is-overleaf = false) {
+    &:before {
+      content: '\f105';
+    }
+  }
 }
 
 .ui-layout-toggler when (@is-overleaf = true) {
-	display: none !important;
+  display: none !important;
 }
 
 .custom-toggler when (@is-overleaf = true) {
-	position: absolute;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: @ui-resizer-size !important;
-	height: 50px;
-	margin-top: -25px;
-	top: 50%;
-	z-index: 3;
-	background-color: @editor-toggler-bg-color;
-
-	&:hover,
-	&:focus {
-		outline: none;
-		text-decoration: none;
-	}
-	// Increase hit area
-	&::before {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 0;
-		right: -3px;
-		bottom: 0;
-		left: -3px;
-	}
-
-	&::after {
-    	font-family: FontAwesome;
-    	-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-    	font-size: 65%;
-    	font-weight: bold;
-		color: #FFF;
-		user-select: none;
-		pointer-events: none;
-	}
-
-	&:hover {
-		background-color: @editor-toggler-hover-bg-color;
-	}
-}
-	.custom-toggler-east::after {
-		content: '\f105';
-	}
-	.custom-toggler-west::after {
-		content: '\f104';
-	}
-
-	.custom-toggler-closed.custom-toggler-east::after {
-		content: '\f104';
-	}
-	.custom-toggler-closed.custom-toggler-west::after {
-		content: '\f105';
-	}
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: @ui-resizer-size !important;
+  height: 50px;
+  margin-top: -25px;
+  top: 50%;
+  z-index: 3;
+  background-color: @editor-toggler-bg-color;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+  // Increase hit area
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -3px;
+    bottom: 0;
+    left: -3px;
+  }
+
+  &::after {
+    font-family: FontAwesome;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 65%;
+    font-weight: bold;
+    color: #fff;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: @editor-toggler-hover-bg-color;
+  }
+}
+.custom-toggler-east::after {
+  content: '\f105';
+}
+.custom-toggler-west::after {
+  content: '\f104';
+}
+
+.custom-toggler-closed.custom-toggler-east::after {
+  content: '\f104';
+}
+.custom-toggler-closed.custom-toggler-west::after {
+  content: '\f105';
+}
 
 .ui-layout-resizer-dragging {
-	background-color: @editor-resizer-bg-color-dragging;
+  background-color: @editor-resizer-bg-color-dragging;
 }
 
 .context-menu {
-	position: fixed;
-	z-index: 100;
+  position: fixed;
+  z-index: 100;
 }
 
 .editor-dark {
-	color: @gray-lighter;
-	background-color: @editor-dark-background-color;
-	
-	.ui-layout-resizer {
-		background-color: darken(@editor-dark-background-color, 10%);
-		border: none;
-	}
-	
-	.btn-default {
-		color: white;
-		background-color: @gray;
-		border-color: darken(@gray-dark, 10%);
-		&:hover {
-			background-color: darken(@gray, 5%);
-			border-color: darken(@gray-dark, 20%);
-			
-		}
-	}
+  color: @gray-lighter;
+  background-color: @editor-dark-background-color;
+
+  .ui-layout-resizer {
+    background-color: darken(@editor-dark-background-color, 10%);
+    border: none;
+  }
+
+  .btn-default {
+    color: white;
+    background-color: @gray;
+    border-color: darken(@gray-dark, 10%);
+    &:hover {
+      background-color: darken(@gray, 5%);
+      border-color: darken(@gray-dark, 20%);
+    }
+  }
 }
 
 .modal-alert {
-	margin-top:10px;
-	margin-bottom:0px;
+  margin-top: 10px;
+  margin-bottom: 0px;
 }
 
 // vertically centre the "connection down" modal so it does not hide
 // the reconnecting indicator
 
 .modal.lock-editor-modal {
-	display: flex !important;
-	.modal-dialog {
-		margin: auto;
-	}
+  display: flex !important;
+  .modal-dialog {
+    margin: auto;
+  }
 }
 
 .sl_references_search_hint {
-	position: relative;
-	top: 100%;
+  position: relative;
+  top: 100%;
 }
 
 .sl_references_search_hint {
-	position: relative;
-	left: -1px;
-	text-align: center;
-	padding: 2px;
-	background: rgb(202, 214, 250);
-	border: 1px solid lightgray;
-	box-shadow: 3px 3px 5px rgba(0,0,0,.2);
+  position: relative;
+  left: -1px;
+  text-align: center;
+  padding: 2px;
+  background: rgb(202, 214, 250);
+  border: 1px solid lightgray;
+  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
 
-	span {
-		color: black;
-	}
+  span {
+    color: black;
+  }
 }
 
 // -- References Search Modal --
 .references-search-modal-backdrop {
-	// don't grey out the editor when the
-	// modal is active
-	background-color: transparent;
+  // don't grey out the editor when the
+  // modal is active
+  background-color: transparent;
 }
 .references-search-modal {
-	// upgrade prompt
-	.references-search-upgrade-prompt {
-		padding: 24px;
-		padding-bottom: 48px;
-		.upgrade-prompt {
-			text-align: center;
-			width: 400px;
-			padding-top: 14px;
-			padding-bottom: 14px;
-			padding-left: 38px;
-			padding-right: 38px;
-			margin: auto;
-			background: white;
-			opacity: 0.95;
-			border-radius: 8px;
-			.message {
-				margin-top: 15px;
-				&.call-to-action {
-					font-weight: bold;
-				}
-				ul.list-unstyled {
-					text-align: left;
-				}
-			}
-			a.btn {
-				opacity: 1.0;
-			}
-		}
-	}
-	.search-form {
-		// position the spinner inside the input element
-		i.fa-spinner {
-			margin-top: -30px;
-		}
-	}
-	.alert-danger {
-		margin-top: 12px;
-		margin-bottom: 0px;
-	}
-	// search result items list
-	.search-results {
-		font-size: 12px;
-		.no-results-message {
-			font-size: 16px;
-		}
-		.search-result-hit {
-			&:hover {
-				cursor: pointer;
-			}
-			border-bottom: 1px solid #ddd;
-			padding: 8px;
-			&:last-child {
-				border-bottom: 1px solid transparent;
-			}
-			border-left: 4px solid transparent;
-			&.selected-search-result-hit {
-				background-color: @red;
-				color: white;
-				.hit-year.small {
-					color: white;
-				}
-				.hit-journal.small {
-					color: white;
-				}
-			}
-			.hit-title {
-				font-size: 1.3em;
-				font-style: italic;
-			}
-		}
-	}
+  // upgrade prompt
+  .references-search-upgrade-prompt {
+    padding: 24px;
+    padding-bottom: 48px;
+    .upgrade-prompt {
+      text-align: center;
+      width: 400px;
+      padding-top: 14px;
+      padding-bottom: 14px;
+      padding-left: 38px;
+      padding-right: 38px;
+      margin: auto;
+      background: white;
+      opacity: 0.95;
+      border-radius: 8px;
+      .message {
+        margin-top: 15px;
+        &.call-to-action {
+          font-weight: bold;
+        }
+        ul.list-unstyled {
+          text-align: left;
+        }
+      }
+      a.btn {
+        opacity: 1;
+      }
+    }
+  }
+  .search-form {
+    // position the spinner inside the input element
+    i.fa-spinner {
+      margin-top: -30px;
+    }
+  }
+  .alert-danger {
+    margin-top: 12px;
+    margin-bottom: 0px;
+  }
+  // search result items list
+  .search-results {
+    font-size: 12px;
+    .no-results-message {
+      font-size: 16px;
+    }
+    .search-result-hit {
+      &:hover {
+        cursor: pointer;
+      }
+      border-bottom: 1px solid #ddd;
+      padding: 8px;
+      &:last-child {
+        border-bottom: 1px solid transparent;
+      }
+      border-left: 4px solid transparent;
+      &.selected-search-result-hit {
+        background-color: @red;
+        color: white;
+        .hit-year.small {
+          color: white;
+        }
+        .hit-journal.small {
+          color: white;
+        }
+      }
+      .hit-title {
+        font-size: 1.3em;
+        font-style: italic;
+      }
+    }
+  }
 }
 
 .referencesImportModal {
-	.referencesImportPreviewScroller {
-		font-family: monospace;
-		font-size: 0.8em;
-		max-height: 360px;
-		overflow: scroll;
-		white-space: pre;
-		padding: 8px 12px;
-		margin-bottom: 15px;
-		border: 1px solid @gray-lighter;
-		background-color: @gray-lightest;
-	}
+  .referencesImportPreviewScroller {
+    font-family: monospace;
+    font-size: 0.8em;
+    max-height: 360px;
+    overflow: scroll;
+    white-space: pre;
+    padding: 8px 12px;
+    margin-bottom: 15px;
+    border: 1px solid @gray-lighter;
+    background-color: @gray-lightest;
+  }
 }
 
 .teaser-title,
 .dropbox-teaser-title {
-	margin-top: 0;
-	text-align: center;
+  margin-top: 0;
+  text-align: center;
 }
 
 .teaser-img,
 .dropbox-teaser-img {
-	.img-responsive;
-	margin-bottom: 5px;
+  .img-responsive;
+  margin-bottom: 5px;
 }
 
 .teaser-video-container,
 .dropbox-teaser-video-container {
-	margin-top: -@modal-inner-padding;
-	margin-left: -@modal-inner-padding;
-	margin-right: -@modal-inner-padding;
-	margin-bottom: 5px;
-	overflow: hidden;
+  margin-top: -@modal-inner-padding;
+  margin-left: -@modal-inner-padding;
+  margin-right: -@modal-inner-padding;
+  margin-bottom: 5px;
+  overflow: hidden;
 }
 
 .teaser-video,
 .dropbox-teaser-video {
-	width: 100%;
-	height: auto;
-	border-bottom: 1px solid @modal-header-border-color;
+  width: 100%;
+  height: auto;
+  border-bottom: 1px solid @modal-header-border-color;
 }
 
 .spell-check-menu {
-	> .dropdown-menu > li > a {
-		padding: 2px 15px;
-	}
+  > .dropdown-menu > li > a {
+    padding: 2px 15px;
+  }
 }
 
 .spell-check-menu-from-bottom {
-	> .dropdown-menu {
-		top: auto;
-		bottom: 100%;
-	}
+  > .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+  }
 }

services/web/frontend/stylesheets/app/editor/binary-file.less

@@ -1,52 +1,51 @@
 .binary-file {
-	padding: @line-height-computed / 2;
-	background-color: @gray-lightest;
-	text-align: center;
-	overflow: auto;
-	img {
-		max-width: 100%;
-		max-height: 90%;
-		display: block;
-		margin: auto;
-		margin-top: @line-height-computed / 2;
-		border: 1px solid @gray;
-		.box-shadow(0 2px 3px @gray;);
-		background-color: white;
-	}
-	.img-preview {
-		background: url('/img/spinner.gif') no-repeat;
-		min-width: 200px;
-		min-height: 200px;
-	}
-	p.no-preview {
-		margin-top: @line-height-computed / 2;
-		font-size: 24px;
-		color: @gray;
-	}
-	.text-loading {
-		margin-top: @line-height-computed / 2;
-		font-size: 24px;
-		color: @gray;
-	}
-	.text-preview {
-		margin-top: @line-height-computed / 2;
-		.scroll-container {
-			background-color: white;
-			font-size: 0.8em;
-			line-height: 1.1em;
-			overflow: auto;
-			border: 1px solid @gray-lighter;
-			padding-left: 12px;
-			padding-right: 12px;
-			padding-top: 8px;
-			padding-bottom: 8px;
-			text-align: left;
-			white-space: pre;
-			font-family: monospace;
-		}
-	}
-	.linked-file-icon {
-		color: @blue
-	}
-
+  padding: @line-height-computed / 2;
+  background-color: @gray-lightest;
+  text-align: center;
+  overflow: auto;
+  img {
+    max-width: 100%;
+    max-height: 90%;
+    display: block;
+    margin: auto;
+    margin-top: @line-height-computed / 2;
+    border: 1px solid @gray;
+    .box-shadow(0 2px 3px @gray;);
+    background-color: white;
+  }
+  .img-preview {
+    background: url('/img/spinner.gif') no-repeat;
+    min-width: 200px;
+    min-height: 200px;
+  }
+  p.no-preview {
+    margin-top: @line-height-computed / 2;
+    font-size: 24px;
+    color: @gray;
+  }
+  .text-loading {
+    margin-top: @line-height-computed / 2;
+    font-size: 24px;
+    color: @gray;
+  }
+  .text-preview {
+    margin-top: @line-height-computed / 2;
+    .scroll-container {
+      background-color: white;
+      font-size: 0.8em;
+      line-height: 1.1em;
+      overflow: auto;
+      border: 1px solid @gray-lighter;
+      padding-left: 12px;
+      padding-right: 12px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      text-align: left;
+      white-space: pre;
+      font-family: monospace;
+    }
+  }
+  .linked-file-icon {
+    color: @blue;
+  }
 }

services/web/frontend/stylesheets/app/editor/chat.less

@@ -1,163 +1,163 @@
 @new-message-height: 80px;
 
 #chat-wrapper {
-	> .ui-layout-resizer > .ui-layout-toggler {
-		display: none !important;
-	}
+  > .ui-layout-resizer > .ui-layout-toggler {
+    display: none !important;
+  }
 }
 
 .chat {
-	.loading {
-		font-family: @font-family-serif;
-		padding: @line-height-computed / 2;
-		text-align: center;
-	}
-	
-	.no-messages {
-		padding: @line-height-computed / 2;
-	}
-	
-	.first-message {
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		padding: @line-height-computed / 2;
-	}
-	
-	.messages {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: @new-message-height;
-		overflow-x: hidden;
-		background-color: @chat-bg;
+  .loading {
+    font-family: @font-family-serif;
+    padding: @line-height-computed / 2;
+    text-align: center;
+  }
 
-		li.message {
-			margin: @line-height-computed / 2;
-			.date {
-				font-size: 12px;
-				color: @chat-message-date-color;
-				margin-bottom: @line-height-computed / 2;
-				text-align: right;
-			}
-			.date when (@is-overleaf = false) {
-				border-bottom: 1px solid @gray-lightest;
-				text-align: center;
-			}
-			.avatar {
-				margin-top: 14px;
-				float: left;
-				width: 50px;
-				height: 50px;
-				border-radius: 50%;
-				overflow: hidden;
-				img {
-					width: 100%;
-				}
-			}
-			.message-wrapper {
-				margin-left: 50px + @line-height-computed/2;
+  .no-messages {
+    padding: @line-height-computed / 2;
+  }
 
-				.name {
-					font-size: 12px;
-					color: @chat-message-name-color;
-					margin-bottom: 4px;
-					min-height: 16px;
-				}
-				.message {
-					border-left: 3px solid transparent;
-					font-size: 14px;
-					box-shadow: @chat-message-box-shadow;
-					border-radius: @chat-message-border-radius;
-					position: relative;
-					
-					.message-content {
-						padding: @chat-message-padding;
-						overflow-x: auto;
-						color: @chat-message-color;
-						font-weight: @chat-message-weight;
-					}
+  .first-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: @line-height-computed / 2;
+  }
 
-					.arrow {
-						right: 100%;
-						top: @line-height-computed / 4;
-						border: solid;
-						content: " ";
-						height: 0;
-						width: 0;
-						position: absolute;
-						pointer-events: none;
-						border-top-color: transparent !important;
-						border-bottom-color: transparent !important;
-						border-width: 10px;
-					}
-				}
-				p {
-					margin-bottom: @line-height-computed / 4;
-					&:last-child {
-						margin-bottom: 0;
-					}
-				}
-			}
+  .messages {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: @new-message-height;
+    overflow-x: hidden;
+    background-color: @chat-bg;
 
-			&:not(.self) {
-				.message {
-					.arrow {
-						border-left-color: transparent !important;
-					}
-				}
-			}
+    li.message {
+      margin: @line-height-computed / 2;
+      .date {
+        font-size: 12px;
+        color: @chat-message-date-color;
+        margin-bottom: @line-height-computed / 2;
+        text-align: right;
+      }
+      .date when (@is-overleaf = false) {
+        border-bottom: 1px solid @gray-lightest;
+        text-align: center;
+      }
+      .avatar {
+        margin-top: 14px;
+        float: left;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        overflow: hidden;
+        img {
+          width: 100%;
+        }
+      }
+      .message-wrapper {
+        margin-left: 50px + @line-height-computed / 2;
 
-			&.self {
-				margin-top: @line-height-computed;
-				.avatar {
-					display: none;
-				}
-				.message-wrapper .message {
-					border-left: none;
-					border-right: 3px solid transparent;
-					.arrow {
-						left: 100%;
-						right: auto;
-						border-right-color: transparent !important;
-					}
-				}
-			}
-		}
-	}
+        .name {
+          font-size: 12px;
+          color: @chat-message-name-color;
+          margin-bottom: 4px;
+          min-height: 16px;
+        }
+        .message {
+          border-left: 3px solid transparent;
+          font-size: 14px;
+          box-shadow: @chat-message-box-shadow;
+          border-radius: @chat-message-border-radius;
+          position: relative;
 
-	.new-message {
-		.full-size;
-		top: auto;
-		height: @new-message-height;
-		background-color: @chat-new-message-bg;
-		padding: @line-height-computed / 4;
-		border-top: 1px solid @chat-new-message-border-color;
-		textarea {
-			overflow: auto;
-			resize: none;
-			border-radius: @border-radius-base;
-			border: 1px solid @chat-new-message-border-color;
-			height: 100%;
-			width: 100%;
-			color: @chat-new-message-textarea-color;
-			font-size: 14px;
-			padding: @line-height-computed / 4;
-			background-color: @chat-new-message-textarea-bg;
-		}
-	}
+          .message-content {
+            padding: @chat-message-padding;
+            overflow-x: auto;
+            color: @chat-message-color;
+            font-weight: @chat-message-weight;
+          }
+
+          .arrow {
+            right: 100%;
+            top: @line-height-computed / 4;
+            border: solid;
+            content: ' ';
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-top-color: transparent !important;
+            border-bottom-color: transparent !important;
+            border-width: 10px;
+          }
+        }
+        p {
+          margin-bottom: @line-height-computed / 4;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      &:not(.self) {
+        .message {
+          .arrow {
+            border-left-color: transparent !important;
+          }
+        }
+      }
+
+      &.self {
+        margin-top: @line-height-computed;
+        .avatar {
+          display: none;
+        }
+        .message-wrapper .message {
+          border-left: none;
+          border-right: 3px solid transparent;
+          .arrow {
+            left: 100%;
+            right: auto;
+            border-right-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  .new-message {
+    .full-size;
+    top: auto;
+    height: @new-message-height;
+    background-color: @chat-new-message-bg;
+    padding: @line-height-computed / 4;
+    border-top: 1px solid @chat-new-message-border-color;
+    textarea {
+      overflow: auto;
+      resize: none;
+      border-radius: @border-radius-base;
+      border: 1px solid @chat-new-message-border-color;
+      height: 100%;
+      width: 100%;
+      color: @chat-new-message-textarea-color;
+      font-size: 14px;
+      padding: @line-height-computed / 4;
+      background-color: @chat-new-message-textarea-bg;
+    }
+  }
 }
 
 .break-word {
-	word-break: break-all;
+  word-break: break-all;
 }
 
 .editor-dark when (@is-overleaf = false) {
-	.chat {
-		.new-message {
-			background-color: lighten(@editor-dark-background-color, 10%);
-			border-color: @editor-dark-toolbar-border-color;
-		}
-	}
-}
+  .chat {
+    .new-message {
+      background-color: lighten(@editor-dark-background-color, 10%);
+      border-color: @editor-dark-toolbar-border-color;
+    }
+  }
+}

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -1,332 +1,338 @@
 .fake-full-width-bg(@bg-color) {
-	&::before {
-		content: '\00a0';
-		position: absolute;
-		width: 100%;
-		right: 100%;
-		background-color: @bg-color;
-	}
+  &::before {
+    content: '\00a0';
+    position: absolute;
+    width: 100%;
+    right: 100%;
+    background-color: @bg-color;
+  }
 }
 
 .file-tree {
-	.toolbar.toolbar-filetree {
-		.toolbar-small-mixin;
-		.toolbar-alt-mixin;
-		padding: 0 5px;
-	}
-	
-	.file-tree-inner {
-		position: absolute;
-		top: 32px;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		overflow-y: auto;
-		background-color: @file-tree-bg;
-
-		&.no-toolbar {
-			top: 0;
-		}
-	}
-
-	// TODO; Consolidate with "Project files" in Overleaf
-	h3 {
-		font-size: 1rem;
-		border-bottom: 1px solid @gray;
-		padding-bottom: (@line-height-computed / 4);
-		margin: (@line-height-computed / 2);
-	}
-
-	ul.file-tree-list when (@is-overleaf = false) {
-		font-size: 0.8rem;
-		padding: (@line-height-computed / 4) 0;
-	}
-
-	&-history {
-		.entity-name {
-			padding-left: 6px;
-			&.deleted {
-				text-decoration: line-through;
-			}
-		}
-		.loading {
-			padding-left: 6px;
-			color: #FFF;
-
-			i.fa {
-				color: #FFF;
-			}
-		}
-	}
-
-	li .entity-name.droppable-hover when (@is-overleaf = true) {
-		font-weight: bold;
-		background-color: @file-tree-item-hover-bg;
-		.fake-full-width-bg(@file-tree-item-hover-bg);
-	}
-	li .entity-name.droppable-hover when (@is-overleaf-light = true) {
-		// color: @file-tree-item-selected-color;
-	}
-
-	ul.droppable-hover li div.entity-name:hover when (@is-overleaf = true) {
-		background-color: transparent;
-		.fake-full-width-bg(transparent);
-		&.droppable-hover {
-			background-color: @file-tree-item-hover-bg;
-			.fake-full-width-bg(@file-tree-item-hover-bg);
-		}
-	}
-
-	ul.file-tree-list {
-		margin: 0;
-		overflow-x: hidden;
-		height: 100%;
-
-		ul {
-			margin-left: (@line-height-computed / 2);
-		}
-
-		li {
-			line-height: @file-tree-line-height;
-			position: relative;
-
-			.entity {
-				user-select: none;
-			}
-
-			.entity-name {
-				color: @file-tree-item-color;
-				cursor: pointer;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				&:hover {
-					background-color: @file-tree-item-hover-bg;
-				}
-				&:hover when (@is-overleaf = true) {
-					// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
-					// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin) 
-					// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
-					// the empty space.
-					.fake-full-width-bg(@file-tree-item-hover-bg);
-				}
-				input {
-					line-height: 1.6;
-				}
-				&.droppable-hover when (@is-overleaf = false) {
-					background-color: fade(@file-tree-droppable-bg-color, 60%);
-				}
-			}
-
-			i.fa {
-				color: @file-tree-item-icon-color;
-				font-size: 14px;
-				&.linked-file-highlight {
-					&when (@is-overleaf = true) {
-						color: white;
-					}
-					&when (@is-overleaf = false) {
-						color: @blue;
-					}
-					position: relative;
-					top: 4px;
-					left: -8px;
-					font-size: 12px;
-				}
-			}
-
-			i.fa-folder-open, i.fa-folder {
-				color: @file-tree-item-folder-color;
-				font-size: 14px;
-			}
-
-			i.toggle {
-				width: 24px;
-				padding: 6px;
-				font-size: 0.7rem;
-				color: @file-tree-item-toggle-color;
-			}
-			
-			&.multi-selected {
-				> .entity > .entity-name when (@is-overleaf = false) {
-					background-color: @file-tree-multiselect-bg;
-					&:hover {
-						background-color: @file-tree-multiselect-hover-bg;
-					}
-				}
-				> .entity when (@is-overleaf = true) {
-					> .entity-name {
-						> div > i.fa,
-						> i.fa,
-						.entity-menu-toggle i.fa {
-							color: #FFF;
-						}
-						> i.fa i.linked-file-highlight {
-							color: @blue;
-						}
-						color: #FFF;
-						font-weight: bold;
-						background-color: @file-tree-multiselect-bg;
-						.fake-full-width-bg(@file-tree-multiselect-bg);
-						&:hover {
-							background-color: @file-tree-multiselect-hover-bg;
-							.fake-full-width-bg(@file-tree-multiselect-hover-bg);
-						}
-					}
-				}
-			}
-
-			.dropdown {
-				position: absolute;
-				right: 0;
-				> a {
-					padding: 0 12px;
-				}
-			}
-			
-			.rename-input {
-				display: block;
-				position: absolute;
-				top: 1px;
-				left: 44px;
-				right: 32px;
-				color: @file-tree-item-input-color;
-				input {
-					width: 100%;
-				}
-			}
-			
-			> .entity > .entity-name {
-				.entity-menu-toggle {
-					display: none;
-				}
-			}
-		}
-	}
-	
-	&:not(.multi-selected) {
-		ul.file-tree-list li.selected {
-			> .entity > .entity-name when (@is-overleaf = false) {
-				color: @link-color;
-				border-right: 4px solid @link-color;
-				font-weight: bold;
-				padding-right: 32px;
-				i.fa-folder-open, i.fa {
-					color: @link-color;
-				}
-				.entity-menu-toggle {
-					display: inline;
-				}
-			}
-
-			> .entity when (@is-overleaf = true) {
-				> .entity-name {
-					color: @file-tree-item-selected-color;
-					> div > i.fa,
-					> i.fa,
-					.entity-menu-toggle i.fa {
-						color: @file-tree-item-selected-color;
-					}
-					> i.fa i.linked-file-highlight {
-						color: @blue;
-					}
-					background-color: @file-tree-item-selected-bg;
-					font-weight: bold;
-					padding-right: 32px;
-					.fake-full-width-bg(@file-tree-item-selected-bg);
-
-					.entity-menu-toggle {
-						display: inline;
-					}
-				}
-			}
-		}
-	}
-
-	ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
-		background-color: fade(@file-tree-droppable-bg-color, 60%);
-	}
-
-	.ui-draggable-dragging when (@is-overleaf = true) {
-		background-color: fade(@file-tree-item-selected-bg, 60%);
-		color: @file-tree-item-selected-color;
-		width: 75%;
-		padding-left: @line-height-computed;
-	}
+  .toolbar.toolbar-filetree {
+    .toolbar-small-mixin;
+    .toolbar-alt-mixin;
+    padding: 0 5px;
+  }
+
+  .file-tree-inner {
+    position: absolute;
+    top: 32px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    background-color: @file-tree-bg;
+
+    &.no-toolbar {
+      top: 0;
+    }
+  }
+
+  // TODO; Consolidate with "Project files" in Overleaf
+  h3 {
+    font-size: 1rem;
+    border-bottom: 1px solid @gray;
+    padding-bottom: (@line-height-computed / 4);
+    margin: (@line-height-computed / 2);
+  }
+
+  ul.file-tree-list when (@is-overleaf = false) {
+    font-size: 0.8rem;
+    padding: (@line-height-computed / 4) 0;
+  }
+
+  &-history {
+    .entity-name {
+      padding-left: 6px;
+      &.deleted {
+        text-decoration: line-through;
+      }
+    }
+    .loading {
+      padding-left: 6px;
+      color: #fff;
+
+      i.fa {
+        color: #fff;
+      }
+    }
+  }
+
+  li .entity-name.droppable-hover when (@is-overleaf = true) {
+    font-weight: bold;
+    background-color: @file-tree-item-hover-bg;
+    .fake-full-width-bg(@file-tree-item-hover-bg);
+  }
+  li .entity-name.droppable-hover when (@is-overleaf-light = true) {
+    // color: @file-tree-item-selected-color;
+  }
+
+  ul.droppable-hover li div.entity-name:hover when (@is-overleaf = true) {
+    background-color: transparent;
+    .fake-full-width-bg(transparent);
+    &.droppable-hover {
+      background-color: @file-tree-item-hover-bg;
+      .fake-full-width-bg(@file-tree-item-hover-bg);
+    }
+  }
+
+  ul.file-tree-list {
+    margin: 0;
+    overflow-x: hidden;
+    height: 100%;
+
+    ul {
+      margin-left: (@line-height-computed / 2);
+    }
+
+    li {
+      line-height: @file-tree-line-height;
+      position: relative;
+
+      .entity {
+        user-select: none;
+      }
+
+      .entity-name {
+        color: @file-tree-item-color;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:hover {
+          background-color: @file-tree-item-hover-bg;
+        }
+        &:hover when (@is-overleaf = true) {
+          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+          // the empty space.
+          .fake-full-width-bg(@file-tree-item-hover-bg);
+        }
+        input {
+          line-height: 1.6;
+        }
+        &.droppable-hover when (@is-overleaf = false) {
+          background-color: fade(@file-tree-droppable-bg-color, 60%);
+        }
+      }
+
+      i.fa {
+        color: @file-tree-item-icon-color;
+        font-size: 14px;
+        &.linked-file-highlight {
+          &when (@is-overleaf = true) {
+            color: white;
+          }
+          &when (@is-overleaf = false) {
+            color: @blue;
+          }
+          position: relative;
+          top: 4px;
+          left: -8px;
+          font-size: 12px;
+        }
+      }
+
+      i.fa-folder-open,
+      i.fa-folder {
+        color: @file-tree-item-folder-color;
+        font-size: 14px;
+      }
+
+      i.toggle {
+        width: 24px;
+        padding: 6px;
+        font-size: 0.7rem;
+        color: @file-tree-item-toggle-color;
+      }
+
+      &.multi-selected {
+        > .entity > .entity-name when (@is-overleaf = false) {
+          background-color: @file-tree-multiselect-bg;
+          &:hover {
+            background-color: @file-tree-multiselect-hover-bg;
+          }
+        }
+        > .entity when (@is-overleaf = true) {
+          > .entity-name {
+            > div > i.fa,
+            > i.fa,
+            .entity-menu-toggle i.fa {
+              color: #fff;
+            }
+            > i.fa i.linked-file-highlight {
+              color: @blue;
+            }
+            color: #fff;
+            font-weight: bold;
+            background-color: @file-tree-multiselect-bg;
+            .fake-full-width-bg(@file-tree-multiselect-bg);
+            &:hover {
+              background-color: @file-tree-multiselect-hover-bg;
+              .fake-full-width-bg(@file-tree-multiselect-hover-bg);
+            }
+          }
+        }
+      }
+
+      .dropdown {
+        position: absolute;
+        right: 0;
+        > a {
+          padding: 0 12px;
+        }
+      }
+
+      .rename-input {
+        display: block;
+        position: absolute;
+        top: 1px;
+        left: 44px;
+        right: 32px;
+        color: @file-tree-item-input-color;
+        input {
+          width: 100%;
+        }
+      }
+
+      > .entity > .entity-name {
+        .entity-menu-toggle {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &:not(.multi-selected) {
+    ul.file-tree-list li.selected {
+      > .entity > .entity-name when (@is-overleaf = false) {
+        color: @link-color;
+        border-right: 4px solid @link-color;
+        font-weight: bold;
+        padding-right: 32px;
+        i.fa-folder-open,
+        i.fa {
+          color: @link-color;
+        }
+        .entity-menu-toggle {
+          display: inline;
+        }
+      }
+
+      > .entity when (@is-overleaf = true) {
+        > .entity-name {
+          color: @file-tree-item-selected-color;
+          > div > i.fa,
+          > i.fa,
+          .entity-menu-toggle i.fa {
+            color: @file-tree-item-selected-color;
+          }
+          > i.fa i.linked-file-highlight {
+            color: @blue;
+          }
+          background-color: @file-tree-item-selected-bg;
+          font-weight: bold;
+          padding-right: 32px;
+          .fake-full-width-bg(@file-tree-item-selected-bg);
+
+          .entity-menu-toggle {
+            display: inline;
+          }
+        }
+      }
+    }
+  }
+
+  ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
+    background-color: fade(@file-tree-droppable-bg-color, 60%);
+  }
+
+  .ui-draggable-dragging when (@is-overleaf = true) {
+    background-color: fade(@file-tree-item-selected-bg, 60%);
+    color: @file-tree-item-selected-color;
+    width: 75%;
+    padding-left: @line-height-computed;
+  }
 }
 
 // TODO check if the OL Beta theme is OK with darker themes.
 .editor-dark when (@is-overleaf = false) {
-	aside#file-tree {
-		// background-color: lighten(@editor-dark-background-color, 10%);
-		
-		ul.file-tree-list {
-			.dropdown-toggle {
-				color: @editor-dark-highlight-color;
-			}
-			
-			li {
-				.entity-name {
-					color: #aaaaaa;
-					&:hover {
-						background-color: black;
-					}
-				}
-				&.selected {
-					> .entity > .entity-name {
-						color: @editor-dark-highlight-color;
-						border-color: @editor-dark-highlight-color;
-						i.fa-folder-open, i.fa-folder, i.fa-file, i.fa-image, i.fa-file-pdf-o {
-							color: @editor-dark-highlight-color;
-						}
-					}
-				}
-			}
-		}
-	}
+  aside#file-tree {
+    // background-color: lighten(@editor-dark-background-color, 10%);
+
+    ul.file-tree-list {
+      .dropdown-toggle {
+        color: @editor-dark-highlight-color;
+      }
+
+      li {
+        .entity-name {
+          color: #aaaaaa;
+          &:hover {
+            background-color: black;
+          }
+        }
+        &.selected {
+          > .entity > .entity-name {
+            color: @editor-dark-highlight-color;
+            border-color: @editor-dark-highlight-color;
+            i.fa-folder-open,
+            i.fa-folder,
+            i.fa-file,
+            i.fa-image,
+            i.fa-file-pdf-o {
+              color: @editor-dark-highlight-color;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 .modal-new-file {
-	padding: 0;
-	table {
-		width: 100%;
-		td {
-			vertical-align: top;
-		}
-	}
-	.toggle-output-files-button {
-		font-size: 80%;
-	}
+  padding: 0;
+  table {
+    width: 100%;
+    td {
+      vertical-align: top;
+    }
+  }
+  .toggle-output-files-button {
+    font-size: 80%;
+  }
+}
+.modal-new-file--list {
+  background-color: @modal-footer-background-color;
+  width: 220px;
+  ul {
+    li {
+      a {
+        color: @text-color;
+        padding: (@line-height-computed / 4);
+        display: block;
+        text-decoration: none;
+      }
+    }
+    li.active {
+      background-color: white;
+      a {
+        color: @link-color;
+      }
+    }
+    li:hover {
+      background-color: white;
+    }
+  }
+}
+
+.modal-new-file--body {
+  padding: 20px;
+  padding-top: (@line-height-computed / 4);
+}
+
+.modal-new-file--body-upload {
+  padding-top: 20px;
 }
-	.modal-new-file--list {
-		background-color: @modal-footer-background-color;
-		width: 220px;
-		ul {
-			li {
-				a {
-					color: @text-color;
-					padding: (@line-height-computed / 4);
-					display: block;
-					text-decoration: none;
-				}
-			}
-			li.active {
-				background-color: white;
-				a {
-					color: @link-color;
-				}
-			}
-			li:hover {
-				background-color: white;
-			}
-		}
-	}
-
-	.modal-new-file--body {
-		padding: 20px;
-		padding-top: (@line-height-computed / 4);
-	}
-
-	.modal-new-file--body-upload {
-		padding-top: 20px;
-	}

services/web/frontend/stylesheets/app/editor/history-v2.less

@@ -1,424 +1,419 @@
 .history-toolbar {
-	display: flex;
-	align-items: center;
-	position: absolute;
-	width: 100%;
-	top: @ide-body-top-offset;
-	height: @editor-toolbar-height;
-	line-height: 1;
-	font-size: @font-size-small;
-	background-color: @history-toolbar-bg-color;
-	z-index: 1;
-	color: @history-toolbar-color;
-	padding-left: (@line-height-computed / 2);
+  display: flex;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  top: @ide-body-top-offset;
+  height: @editor-toolbar-height;
+  line-height: 1;
+  font-size: @font-size-small;
+  background-color: @history-toolbar-bg-color;
+  z-index: 1;
+  color: @history-toolbar-color;
+  padding-left: (@line-height-computed / 2);
 }
 
 .history-compare-mode-toolbar {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	justify-content: center;
-	line-height: 1;
-	font-size: @font-size-small;
-	background-color: @history-toolbar-bg-color;
-	height: @editor-toolbar-height;
-	color: @history-toolbar-color;
-	padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  line-height: 1;
+  font-size: @font-size-small;
+  background-color: @history-toolbar-bg-color;
+  height: @editor-toolbar-height;
+  color: @history-toolbar-color;
+  padding: 0 10px;
 }
 
 .history-toolbar when (@is-overleaf = false) or (@is-overleaf-light) {
-	border-bottom: @toolbar-border-bottom;
+  border-bottom: @toolbar-border-bottom;
 }
 
-	.history-toolbar-selected-version {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		margin-right: (@line-height-computed / 2);
-	}
-		.history-toolbar-time,
-		.history-toolbar-selected-label {
-			font-weight: bold;
-		}
-	.history-toolbar-actions {
-		flex-grow: 1;
-		flex-shrink: 0;
-	}
-		.history-toolbar-btn,
-		.history-toolbar-btn-danger {
-			.btn;
-			.btn-xs;
-			padding-left: @padding-small-horizontal;
-			padding-right: @padding-small-horizontal;
-			margin-right: (@line-height-computed / 2);
-		}
-		.history-toolbar-btn {
-			.btn-info;
-		}
-		.history-toolbar-btn-danger {
-			.btn-danger;
-		}
-	.history-toolbar-entries-list {
-		flex: 0 0 @changesListWidth;
-		padding: 0 10px;
-		border-left: 1px solid @editor-border-color;
-	}
+.history-toolbar-selected-version {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: (@line-height-computed / 2);
+}
+.history-toolbar-time,
+.history-toolbar-selected-label {
+  font-weight: bold;
+}
+.history-toolbar-actions {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.history-toolbar-btn,
+.history-toolbar-btn-danger {
+  .btn;
+  .btn-xs;
+  padding-left: @padding-small-horizontal;
+  padding-right: @padding-small-horizontal;
+  margin-right: (@line-height-computed / 2);
+}
+.history-toolbar-btn {
+  .btn-info;
+}
+.history-toolbar-btn-danger {
+  .btn-danger;
+}
+.history-toolbar-entries-list {
+  flex: 0 0 @changesListWidth;
+  padding: 0 10px;
+  border-left: 1px solid @editor-border-color;
+}
 
 .history-entries {
-	font-size: @history-base-font-size;
-	color: @history-base-color;
-	height: 100%;
-	background-color: @history-base-bg;
-	position: relative;
-	&.history-entries-dragging {
-		cursor: row-resize;
-	}
+  font-size: @history-base-font-size;
+  color: @history-base-color;
+  height: 100%;
+  background-color: @history-base-bg;
+  position: relative;
+  &.history-entries-dragging {
+    cursor: row-resize;
+  }
 }
 
 .history-entry-day {
-	display: block;
-	background-color: @history-entry-day-bg;
-	color: #FFF;
-	padding: 5px 10px;
-	line-height: 1;
-	position: sticky;
-	top: 0;
-	z-index: 3;
+  display: block;
+  background-color: @history-entry-day-bg;
+  color: #fff;
+  padding: 5px 10px;
+  line-height: 1;
+  position: sticky;
+  top: 0;
+  z-index: 3;
 }
 
 .history-entry-toV-handle,
 .history-entry-fromV-handle {
-	position: absolute;
-	background-color: @history-entry-handle-bg;
-	height: @history-entry-handle-height;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 2;
-	cursor: row-resize;
-
-	&.ui-draggable-dragging {
-		opacity: 0;
-	}
-
-	&::after {
-		content: '\00b7\00b7\00b7\00b7';
-		position: absolute;
-		text-align: center;
-		-webkit-font-smoothing: antialiased;
-		width: 100%;
-		font-size: 20px;
-		color: #FFF;
-		height: @history-entry-handle-height;
-		line-height: @history-entry-handle-height / 2;
-	}
+  position: absolute;
+  background-color: @history-entry-handle-bg;
+  height: @history-entry-handle-height;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  cursor: row-resize;
+
+  &.ui-draggable-dragging {
+    opacity: 0;
+  }
+
+  &::after {
+    content: '\00b7\00b7\00b7\00b7';
+    position: absolute;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    width: 100%;
+    font-size: 20px;
+    color: #fff;
+    height: @history-entry-handle-height;
+    line-height: @history-entry-handle-height / 2;
+  }
 }
 
 .history-entry-fromV-handle {
-	top: auto;
-	bottom: 0;
+  top: auto;
+  bottom: 0;
 }
 
 .history-entry-details {
-	position: relative;
-	background-color: #FFF;
-	border-bottom: solid 2px @history-base-bg;
-	padding: 5px 10px;
-	cursor: pointer;
+  position: relative;
+  background-color: #fff;
+  border-bottom: solid 2px @history-base-bg;
+  padding: 5px 10px;
+  cursor: pointer;
 }
 
 .history-version-with-label {
-	.history-entry-details;
-	padding: 7px 10px;
+  .history-entry-details;
+  padding: 7px 10px;
 }
 
-	.history-entry-selected .history-entry-details,
-	.history-version-with-label-selected & {
-		background-color: @history-entry-selected-bg;
-		color: #FFF;
-	}
-
-	.history-entry-hover-selected .history-entry-details,
-	.history-entry-hover-selected.history-entry-selected .history-entry-details, 
-	.history-version-with-label-hover-selected &,
-	.history-version-with-label-hover-selected.history-entry-selected &, {
-		background-color: tint(@history-entry-selected-bg, 20%);
-		color: #FFF;
-	}
-
-	.history-entry-selected-to .history-entry-details,
-	.history-entry-hover-selected-to .history-entry-details,
-	.history-version-with-label-selected-to &,
-	.history-version-with-label-hover-selected-to & {
-		padding-top: @history-entry-handle-height + 5px;
-	}
-
-	.history-entry-selected-from .history-entry-details,
-	.history-entry-hover-selected-from .history-entry-details,
-	.history-version-with-label-selected-from &,
-	.history-version-with-label-hover-selected-from &  {
-		padding-bottom: @history-entry-handle-height + 5px;
-	}
-
+.history-entry-selected .history-entry-details,
+.history-version-with-label-selected & {
+  background-color: @history-entry-selected-bg;
+  color: #fff;
+}
 
+.history-entry-hover-selected .history-entry-details,
+.history-entry-hover-selected.history-entry-selected .history-entry-details,
+.history-version-with-label-hover-selected &,
+.history-version-with-label-hover-selected.history-entry-selected & {
+  background-color: tint(@history-entry-selected-bg, 20%);
+  color: #fff;
+}
 
-	.history-label {
-		display: inline-block;
-		color: @history-entry-label-color;
-		font-size: @font-size-small;
-		margin-bottom: 3px;
-		margin-right: 10px;
-		white-space: nowrap;
-		.history-entry-selected &,
-		.history-entry-hover-selected &,
-		.history-version-with-label-selected &,
-		.history-version-with-label-hover-selected & {
-			color: @history-entry-selected-label-color;
-		}
-		&.history-label-pseudo-current-state {
-			.history-entry-selected &,
-			.history-entry-hover-selected &,
-			.history-version-with-label-selected &,
-			.history-version-with-label-hover-selected & {
-				color: @history-entry-selected-pseudo-label-color;
-			}
-		}
-	}
-		.history-label-comment,
-		.history-label-delete-btn {
-			padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
-			border: 0;
-			background-color: @history-entry-label-bg-color;
-			.history-label-pseudo-current-state & {
-				background-color: @history-entry-pseudo-label-bg-color;
+.history-entry-selected-to .history-entry-details,
+.history-entry-hover-selected-to .history-entry-details,
+.history-version-with-label-selected-to &,
+.history-version-with-label-hover-selected-to & {
+  padding-top: @history-entry-handle-height + 5px;
+}
 
-			}
-			.history-entry-selected &,
-			.history-entry-hover-selected &,
-			.history-version-with-label-selected &,
-			.history-version-with-label-hover-selected & {
-				background-color: @history-entry-selected-label-bg-color;
-			}
-		}
-		.history-label-comment {
-			display: block;
-			float: left;
-			border-radius: 9999px;
-			max-width: 190px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			.history-label-own & {
-				padding-right: (@padding-xs-horizontal / 2);
-				border-radius: 9999px 0 0 9999px;
-			}
-		}
-		.history-label-delete-btn {
-			padding-left: (@padding-xs-horizontal / 2);
-			padding-right: @padding-xs-horizontal;
-			border-radius: 0 9999px 9999px 0;
-			&:hover {
-				background-color: darken(@history-entry-label-bg-color, 8%);
-				.history-entry-selected &,
-				.history-entry-hover-selected &,
-				.history-version-with-label-selected &,
-				.history-version-with-label-hover-selected & {
-					background-color: darken(@history-entry-selected-label-bg-color, 8%);
-				}
-			}
-		}
+.history-entry-selected-from .history-entry-details,
+.history-entry-hover-selected-from .history-entry-details,
+.history-version-with-label-selected-from &,
+.history-version-with-label-hover-selected-from & {
+  padding-bottom: @history-entry-handle-height + 5px;
+}
 
-	.history-label-tooltip {
-		white-space: normal;
-		padding: (@line-height-computed / 4);
-		text-align: left;
-	}
-		.history-label-tooltip-title,
-		.history-label-tooltip-owner,
-		.history-label-tooltip-datetime {
-			margin: 0 0 (@line-height-computed / 4) 0;
-		}  
-		.history-label-tooltip-title {
-			font-weight: bold;
-		}
-		.history-label-tooltip-datetime {
-			margin-bottom: 0;
-		}
+.history-label {
+  display: inline-block;
+  color: @history-entry-label-color;
+  font-size: @font-size-small;
+  margin-bottom: 3px;
+  margin-right: 10px;
+  white-space: nowrap;
+  .history-entry-selected &,
+  .history-entry-hover-selected &,
+  .history-version-with-label-selected &,
+  .history-version-with-label-hover-selected & {
+    color: @history-entry-selected-label-color;
+  }
+  &.history-label-pseudo-current-state {
+    .history-entry-selected &,
+    .history-entry-hover-selected &,
+    .history-version-with-label-selected &,
+    .history-version-with-label-hover-selected & {
+      color: @history-entry-selected-pseudo-label-color;
+    }
+  }
+}
+.history-label-comment,
+.history-label-delete-btn {
+  padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
+  border: 0;
+  background-color: @history-entry-label-bg-color;
+  .history-label-pseudo-current-state & {
+    background-color: @history-entry-pseudo-label-bg-color;
+  }
+  .history-entry-selected &,
+  .history-entry-hover-selected &,
+  .history-version-with-label-selected &,
+  .history-version-with-label-hover-selected & {
+    background-color: @history-entry-selected-label-bg-color;
+  }
+}
+.history-label-comment {
+  display: block;
+  float: left;
+  border-radius: 9999px;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  .history-label-own & {
+    padding-right: (@padding-xs-horizontal / 2);
+    border-radius: 9999px 0 0 9999px;
+  }
+}
+.history-label-delete-btn {
+  padding-left: (@padding-xs-horizontal / 2);
+  padding-right: @padding-xs-horizontal;
+  border-radius: 0 9999px 9999px 0;
+  &:hover {
+    background-color: darken(@history-entry-label-bg-color, 8%);
+    .history-entry-selected &,
+    .history-entry-hover-selected &,
+    .history-version-with-label-selected &,
+    .history-version-with-label-hover-selected & {
+      background-color: darken(@history-entry-selected-label-bg-color, 8%);
+    }
+  }
+}
 
-	.history-entry-changes {
-		.list-unstyled;
-		margin-bottom: 3px;
-	}
-		.history-entry-change {
-			word-break: break-all;
-		}
-			.history-entry-change-action {
-				margin-right: 0.5em;
-			}
+.history-label-tooltip {
+  white-space: normal;
+  padding: (@line-height-computed / 4);
+  text-align: left;
+}
+.history-label-tooltip-title,
+.history-label-tooltip-owner,
+.history-label-tooltip-datetime {
+  margin: 0 0 (@line-height-computed / 4) 0;
+}
+.history-label-tooltip-title {
+  font-weight: bold;
+}
+.history-label-tooltip-datetime {
+  margin-bottom: 0;
+}
 
-			.history-entry-change-doc {
-				color: @history-highlight-color;
-				font-weight: bold;
+.history-entry-changes {
+  .list-unstyled;
+  margin-bottom: 3px;
+}
+.history-entry-change {
+  word-break: break-all;
+}
+.history-entry-change-action {
+  margin-right: 0.5em;
+}
 
-				.history-entry-selected &,
-				.history-entry-hover-selected &,
-				.history-version-with-label-selected & {
-					color: #FFF;
-				}
-			}
-	.history-entry-metadata {
+.history-entry-change-doc {
+  color: @history-highlight-color;
+  font-weight: bold;
 
-	}	
-		.history-entry-metadata-time {
-			white-space: nowrap;
-		}
+  .history-entry-selected &,
+  .history-entry-hover-selected &,
+  .history-version-with-label-selected & {
+    color: #fff;
+  }
+}
+.history-entry-metadata {
+}
+.history-entry-metadata-time {
+  white-space: nowrap;
+}
 
-		.history-entry-metadata-users {
-			display: inline;
-			padding: 0;
-		}
-			.history-entry-metadata-user {
-				display: inline;
-				&::after {
-					content: ', ';
-				}
-				&:last-of-type::after {
-					content: none;
-				}
-			}
+.history-entry-metadata-users {
+  display: inline;
+  padding: 0;
+}
+.history-entry-metadata-user {
+  display: inline;
+  &::after {
+    content: ', ';
+  }
+  &:last-of-type::after {
+    content: none;
+  }
+}
 
 .history-entries-list-upgrade-prompt {
-	background-color: #FFF;
-	margin-bottom: 2px;
-	padding: 5px 10px;
-	.change-list-compare & {
-		font-size: @font-size-small;
-	}
+  background-color: #fff;
+  margin-bottom: 2px;
+  padding: 5px 10px;
+  .change-list-compare & {
+    font-size: @font-size-small;
+  }
 }
 
 .history-labels-list,
 .history-labels-list-compare {
-	.history-entries;
-	overflow-y: auto;
+  .history-entries;
+  overflow-y: auto;
 }
 .history-labels-list-compare {
-	background-color: transparent;
+  background-color: transparent;
 }
 
 .history-file-tree-inner {
-	.full-size;
-	overflow-y: auto;
-	background-color: @file-tree-bg;
-
-	.loading {
-		color: #FFF;
-		font-size: @history-base-font-size;
-		text-align: center;
-		font-family: @font-family-serif;
-	}
+  .full-size;
+  overflow-y: auto;
+  background-color: @file-tree-bg;
+
+  .loading {
+    color: #fff;
+    font-size: @history-base-font-size;
+    text-align: center;
+    font-family: @font-family-serif;
+  }
 }
 
 .tooltip-history-file-tree {
-	font-size: 12px;
-	.tooltip-inner {
-		max-width: 400px;
-		text-align: left;
-	}
+  font-size: 12px;
+  .tooltip-inner {
+    max-width: 400px;
+    text-align: left;
+  }
 }
 
 .history-file-tree-inner when (@is-overleaf = false) {
-	font-size: 0.8rem;
+  font-size: 0.8rem;
 }
 
-	.history-file-entity-wrapper {
-		color: #FFF;
-		margin-left: (@line-height-computed / 2);
-	}
-		.history-file-entity-link {
-			display: block;
-			position: relative;
-			color: @file-tree-item-color;
-			line-height: @file-tree-line-height;
-			&:hover {
-				background-color: @file-tree-item-hover-bg;
-				color: @file-tree-item-color;
-				text-decoration: none;
-			}
-			&:focus {
-				color: @file-tree-item-focus-color;
-				outline: none;
-				text-decoration: none;
-			}
-			&:hover when (@is-overleaf = true) {
-				.fake-full-width-bg(@file-tree-item-hover-bg);
-			}
-		}
-		.history-file-entity-link-selected {
-			background-color: @file-tree-item-selected-bg;
-			font-weight: bold;
-			color: #FFF;
-			.fake-full-width-bg(@file-tree-item-selected-bg);
-			&:hover {
-				background-color: @file-tree-item-hover-bg;
-			}
-			&:focus {
-				color: @file-tree-item-focus-selected-color;
-			}
-		}
-			.history-file-entity-name-container {
-				display: flex;
-				align-items: center;
-			}
-				.history-file-entity-name {
-					flex: 0 1 auto;				
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-				.history-file-entity-operation-badge {
-					flex: 0 0 auto;
-					text-transform: lowercase;
-					margin-left: .5em;
-					font-size: .7em;
-					background: @history-file-badge-bg;
-					color: @history-file-badge-color;
-					border-radius: 8px;
-					line-height: 1;
-					padding: 2px 4px 3px;
-					margin-top: 2px;
-				}
-
-				.history-file-entity-icon,
-				.history-file-operation-icon {
-					flex: 0 0 auto;
-					color: @file-tree-item-icon-color;
-					font-size: 14px;
-					margin-right: .5em;
-					.history-file-entity-link-selected & {
-						color: #FFF;
-					}
-				}
+.history-file-entity-wrapper {
+  color: #fff;
+  margin-left: (@line-height-computed / 2);
+}
+.history-file-entity-link {
+  display: block;
+  position: relative;
+  color: @file-tree-item-color;
+  line-height: @file-tree-line-height;
+  &:hover {
+    background-color: @file-tree-item-hover-bg;
+    color: @file-tree-item-color;
+    text-decoration: none;
+  }
+  &:focus {
+    color: @file-tree-item-focus-color;
+    outline: none;
+    text-decoration: none;
+  }
+  &:hover when (@is-overleaf = true) {
+    .fake-full-width-bg(@file-tree-item-hover-bg);
+  }
+}
+.history-file-entity-link-selected {
+  background-color: @file-tree-item-selected-bg;
+  font-weight: bold;
+  color: #fff;
+  .fake-full-width-bg(@file-tree-item-selected-bg);
+  &:hover {
+    background-color: @file-tree-item-hover-bg;
+  }
+  &:focus {
+    color: @file-tree-item-focus-selected-color;
+  }
+}
+.history-file-entity-name-container {
+  display: flex;
+  align-items: center;
+}
+.history-file-entity-name {
+  flex: 0 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.history-file-entity-operation-badge {
+  flex: 0 0 auto;
+  text-transform: lowercase;
+  margin-left: 0.5em;
+  font-size: 0.7em;
+  background: @history-file-badge-bg;
+  color: @history-file-badge-color;
+  border-radius: 8px;
+  line-height: 1;
+  padding: 2px 4px 3px;
+  margin-top: 2px;
+}
 
-				.history-file-operation-icon {
-					margin-left: .5em;
-					margin-right: 0;
-				}
-					.history-file-entity-name-edited,
-					.history-file-entity-name-added,
-					.history-file-entity-name-removed,
-					.history-file-entity-name-renamed {
-					}
-					.history-file-entity-name-removed {
-						text-decoration: line-through;
-					}
+.history-file-entity-icon,
+.history-file-operation-icon {
+  flex: 0 0 auto;
+  color: @file-tree-item-icon-color;
+  font-size: 14px;
+  margin-right: 0.5em;
+  .history-file-entity-link-selected & {
+    color: #fff;
+  }
+}
 
+.history-file-operation-icon {
+  margin-left: 0.5em;
+  margin-right: 0;
+}
+.history-file-entity-name-edited,
+.history-file-entity-name-added,
+.history-file-entity-name-removed,
+.history-file-entity-name-renamed {
+}
+.history-file-entity-name-removed {
+  text-decoration: line-through;
+}
 
-		.history-file-entity-link-selected when (@is-overleaf = false) {
-			color: @brand-primary;
-			&:hover,
-			&:focus {
-				color: @brand-primary;
-			}
-			.history-file-entity-icon {
-				color: @brand-primary;
-			}
-		}
+.history-file-entity-link-selected when (@is-overleaf = false) {
+  color: @brand-primary;
+  &:hover,
+  &:focus {
+    color: @brand-primary;
+  }
+  .history-file-entity-icon {
+    color: @brand-primary;
+  }
+}

services/web/frontend/stylesheets/app/editor/history.less

@@ -11,331 +11,334 @@
 @history-toolbar-height: 32px;
 
 #history {
-	.upgrade-prompt {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 100;
-		background-color: rgba(128,128,128,0.4);
-		.message {
-			margin: auto;
-			margin-top: 100px;
-			padding: (@line-height-computed / 2) @line-height-computed;
-			width: 400px;
-			background-color: white;
-			border-radius: 8px;
-		}
-		.message-wider {
-			width: 650px;
-			margin-top: 60px;
-			padding: 0;
-		}
+  .upgrade-prompt {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: rgba(128, 128, 128, 0.4);
+    .message {
+      margin: auto;
+      margin-top: 100px;
+      padding: (@line-height-computed / 2) @line-height-computed;
+      width: 400px;
+      background-color: white;
+      border-radius: 8px;
+    }
+    .message-wider {
+      width: 650px;
+      margin-top: 60px;
+      padding: 0;
+    }
 
-			.message-header {
-				.modal-header;
-			}
+    .message-header {
+      .modal-header;
+    }
 
-			.message-body {
-				.modal-body;
-			}
-	}
+    .message-body {
+      .modal-body;
+    }
+  }
 
-	.diff-panel,
-	.point-in-time-panel {
-		.full-size;
-		margin-right: @changesListWidth;
-	}
+  .diff-panel,
+  .point-in-time-panel {
+    .full-size;
+    margin-right: @changesListWidth;
+  }
 
-	.diff {
-		.full-size;
-		.toolbar {
-			padding: 3px;
-			height: @history-toolbar-height;
-			.name {
-				color: #FFF;
-				float: left;
-				padding: 3px @line-height-computed / 4;
-				display: inline-block;
-			}
-		}
-		.diff-editor-v2 {
-			.full-size;
-		}
-		.diff-editor {
-			.full-size;
-			top: @history-toolbar-height;
-		}
-		.diff-deleted {
-			padding: @line-height-computed;
-		}
-		.deleted-warning {
-			background-color: @brand-danger;
-			color: white;
-			padding: @line-height-computed / 2;
-			margin-right: @line-height-computed / 4;
-		}
-		&-binary {
-			.alert {
-				margin: @line-height-computed / 2;
-			}
-		}
-	}
+  .diff {
+    .full-size;
+    .toolbar {
+      padding: 3px;
+      height: @history-toolbar-height;
+      .name {
+        color: #fff;
+        float: left;
+        padding: 3px @line-height-computed / 4;
+        display: inline-block;
+      }
+    }
+    .diff-editor-v2 {
+      .full-size;
+    }
+    .diff-editor {
+      .full-size;
+      top: @history-toolbar-height;
+    }
+    .diff-deleted {
+      padding: @line-height-computed;
+    }
+    .deleted-warning {
+      background-color: @brand-danger;
+      color: white;
+      padding: @line-height-computed / 2;
+      margin-right: @line-height-computed / 4;
+    }
+    &-binary {
+      .alert {
+        margin: @line-height-computed / 2;
+      }
+    }
+  }
 
-	aside.change-list {
-		border-left: 1px solid @editor-border-color;
-		height: 100%;
-		width: @changesListWidth;
-		position: absolute;
-		right: 0;
+  aside.change-list {
+    border-left: 1px solid @editor-border-color;
+    height: 100%;
+    width: @changesListWidth;
+    position: absolute;
+    right: 0;
 
-		.loading {
-			text-align: center;
-			font-family: @font-family-serif;
-			margin-top: (@line-height-computed / 2);
-		}
+    .loading {
+      text-align: center;
+      font-family: @font-family-serif;
+      margin-top: (@line-height-computed / 2);
+    }
 
-		ul {
-			li.change {
-				position: relative;
-				user-select: none;
-				-ms-user-select: none;
-				-moz-user-select: none;
-				-webkit-user-select: none;
+    ul {
+      li.change {
+        position: relative;
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
 
-				.day {
-					background-color: #fafafa;
-					border-bottom: 1px solid @editor-border-color;
-					padding: 4px;
-					font-weight: bold;
-					text-align: center;
-					height: @day-header-height;
-					font-size: 14px;
-					line-height: 1;
-				}
-				.selectors {
-					input {
-						margin: 0;
-					}
-					position: absolute;
-					left: @selector-padding-horizontal;
-					top: 0;
-					bottom: 0;
-					width: 24px;
-					.selector-from {
-						position: absolute;
-						bottom: @selector-padding-vertical;
-						left: 0;
-						opacity: 0.8;
-					}
-					.selector-to {
-						position: absolute;
-						top: @selector-padding-vertical;
-						left: 0;
-						opacity: 0.8;
-					}
-					.range {
-						position: absolute;
-						left: 5px;
-						width: 4px;
-						top: 0;
-						bottom: 0;
-					}
-				}
-				.description {
-					padding: (@line-height-computed / 4);
-					padding-left: 38px;
-					min-height: 38px;
-					border-bottom: 1px solid @editor-border-color;
-					cursor: pointer;
-					&:hover {
-						background-color: @gray-lightest;
-					}
-				}
-				.users {
-					.user {
-						font-size: 0.8rem;
-						color: @gray;
-						text-transform: capitalize;
-						position: relative;
-						padding-left: 16px;
-						.color-square {
-							height: 12px;
-							width: 12px;
-							border-radius: 3px;
-							position: absolute;
-							left: 0;
-							bottom: 3px;
-						}
-						.name {
-							width: 94%;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
-						}
-					}
-				}
-				.time {
-					float: right;
-					color: @gray;
-					display: inline-block;
-					padding-right: (@line-height-computed / 2);
-					font-size: 0.8rem;
-					line-height: @line-height-computed;
-				}
-				.doc {
-					font-size: 0.9rem;
-					font-weight: bold;
-				}
-				.action {
-					color: @gray;
-					text-transform: uppercase;
-					font-size: 0.7em;
-					margin-bottom: -2px;
-					margin-top: 2px;
-					&-edited {
-						margin-top: 0;
-					}
-				}
-			}
-			li.loading-changes, li.empty-message {
-				padding: 6px;
-				cursor: default;
-				&:hover {
-					background-color: inherit;
-				}
-			}
-			li.selected {
-				border-left: 4px solid @range-bar-color;
-				.day {
-					padding-left: 0;
-				}
-				.description {
-					padding-left: 34px;
-				}
-				.selectors {
-					left: @selector-padding-horizontal - 4px;
-					.range {
-						background-color: @range-bar-color;
-					}
-				}
-			}
-			li.selected-to {
-				.selectors {
-					.range {
-						top: @range-bar-selected-offset;
-					}
-					.selector-to {
-						opacity: 1;
-					}
-				}
-			}
-			li.selected-from {
-				.selectors {
-					.range {
-						bottom: @range-bar-selected-offset;
-					}
-					.selector-from {
-						opacity: 1;
-					}
-				}
-			}
-			li.first-in-day {
-				.selectors {
-					.selector-to {
-						top: @day-header-height + @selector-padding-vertical;
-					}
-				}
-			}
-			li.first-in-day.selected-to {
-				.selectors {
-					.range {
-						top: @day-header-height + @range-bar-selected-offset;
-					}
-				}
-			}
-		}
-		ul.hover-state {
-			li {
-				.selectors {
-					.range {
-						background-color: transparent;
-						top: 0;
-						bottom: 0;
-					}
-				}
-			}
-			li.hover-selected {
-				.selectors {
-					.range {
-						top: 0;
-						background-color: @gray-light;
-					}
-				}
-			}
-			li.hover-selected-to {
-				.selectors {
-					.range {
-						top: @range-bar-selected-offset;
-					}
-					.selector-to {
-						opacity: 1;
-					}
-				}
-			}
-			li.hover-selected-from {
-				.selectors {
-					.range {
-						bottom: @range-bar-selected-offset;
-					}
-					.selector-from {
-						opacity: 1;
-					}
-				}
-			}
-			li.first-in-day.hover-selected-to {
-				.selectors {
-					.range {
-						top: @day-header-height + @range-bar-selected-offset;
-					}
-				}
-			}
-		}
-	}
+        .day {
+          background-color: #fafafa;
+          border-bottom: 1px solid @editor-border-color;
+          padding: 4px;
+          font-weight: bold;
+          text-align: center;
+          height: @day-header-height;
+          font-size: 14px;
+          line-height: 1;
+        }
+        .selectors {
+          input {
+            margin: 0;
+          }
+          position: absolute;
+          left: @selector-padding-horizontal;
+          top: 0;
+          bottom: 0;
+          width: 24px;
+          .selector-from {
+            position: absolute;
+            bottom: @selector-padding-vertical;
+            left: 0;
+            opacity: 0.8;
+          }
+          .selector-to {
+            position: absolute;
+            top: @selector-padding-vertical;
+            left: 0;
+            opacity: 0.8;
+          }
+          .range {
+            position: absolute;
+            left: 5px;
+            width: 4px;
+            top: 0;
+            bottom: 0;
+          }
+        }
+        .description {
+          padding: (@line-height-computed / 4);
+          padding-left: 38px;
+          min-height: 38px;
+          border-bottom: 1px solid @editor-border-color;
+          cursor: pointer;
+          &:hover {
+            background-color: @gray-lightest;
+          }
+        }
+        .users {
+          .user {
+            font-size: 0.8rem;
+            color: @gray;
+            text-transform: capitalize;
+            position: relative;
+            padding-left: 16px;
+            .color-square {
+              height: 12px;
+              width: 12px;
+              border-radius: 3px;
+              position: absolute;
+              left: 0;
+              bottom: 3px;
+            }
+            .name {
+              width: 94%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        .time {
+          float: right;
+          color: @gray;
+          display: inline-block;
+          padding-right: (@line-height-computed / 2);
+          font-size: 0.8rem;
+          line-height: @line-height-computed;
+        }
+        .doc {
+          font-size: 0.9rem;
+          font-weight: bold;
+        }
+        .action {
+          color: @gray;
+          text-transform: uppercase;
+          font-size: 0.7em;
+          margin-bottom: -2px;
+          margin-top: 2px;
+          &-edited {
+            margin-top: 0;
+          }
+        }
+      }
+      li.loading-changes,
+      li.empty-message {
+        padding: 6px;
+        cursor: default;
+        &:hover {
+          background-color: inherit;
+        }
+      }
+      li.selected {
+        border-left: 4px solid @range-bar-color;
+        .day {
+          padding-left: 0;
+        }
+        .description {
+          padding-left: 34px;
+        }
+        .selectors {
+          left: @selector-padding-horizontal - 4px;
+          .range {
+            background-color: @range-bar-color;
+          }
+        }
+      }
+      li.selected-to {
+        .selectors {
+          .range {
+            top: @range-bar-selected-offset;
+          }
+          .selector-to {
+            opacity: 1;
+          }
+        }
+      }
+      li.selected-from {
+        .selectors {
+          .range {
+            bottom: @range-bar-selected-offset;
+          }
+          .selector-from {
+            opacity: 1;
+          }
+        }
+      }
+      li.first-in-day {
+        .selectors {
+          .selector-to {
+            top: @day-header-height + @selector-padding-vertical;
+          }
+        }
+      }
+      li.first-in-day.selected-to {
+        .selectors {
+          .range {
+            top: @day-header-height + @range-bar-selected-offset;
+          }
+        }
+      }
+    }
+    ul.hover-state {
+      li {
+        .selectors {
+          .range {
+            background-color: transparent;
+            top: 0;
+            bottom: 0;
+          }
+        }
+      }
+      li.hover-selected {
+        .selectors {
+          .range {
+            top: 0;
+            background-color: @gray-light;
+          }
+        }
+      }
+      li.hover-selected-to {
+        .selectors {
+          .range {
+            top: @range-bar-selected-offset;
+          }
+          .selector-to {
+            opacity: 1;
+          }
+        }
+      }
+      li.hover-selected-from {
+        .selectors {
+          .range {
+            bottom: @range-bar-selected-offset;
+          }
+          .selector-from {
+            opacity: 1;
+          }
+        }
+      }
+      li.first-in-day.hover-selected-to {
+        .selectors {
+          .range {
+            top: @day-header-height + @range-bar-selected-offset;
+          }
+        }
+      }
+    }
+  }
 }
 
 .diff-deleted {
-	padding-top: 15px;
+  padding-top: 15px;
 }
 
 .hide-ace-cursor {
-	.ace_active-line, .ace_cursor-layer, .ace_bracket {
-		display: none;
-	}
+  .ace_active-line,
+  .ace_cursor-layer,
+  .ace_bracket {
+    display: none;
+  }
 
-	.ace_gutter-active-line {
-		background-color: transparent;
-	}
+  .ace_gutter-active-line {
+    background-color: transparent;
+  }
 }
 
 .editor-dark {
-	#history {
-		aside.change-list {
-			border-color: @editor-dark-toolbar-border-color;
-			
-			ul li.change {
-				.day {
-					background-color: darken(@editor-dark-background-color, 10%);
-					border-bottom: 1px solid @editor-dark-toolbar-border-color;
-				}
-				.description {
-					border-bottom: 1px solid @editor-dark-toolbar-border-color;
-					&:hover {
-						background-color: black;
-					}
-				}
-			}
-		}
-	}
+  #history {
+    aside.change-list {
+      border-color: @editor-dark-toolbar-border-color;
+
+      ul li.change {
+        .day {
+          background-color: darken(@editor-dark-background-color, 10%);
+          border-bottom: 1px solid @editor-dark-toolbar-border-color;
+        }
+        .description {
+          border-bottom: 1px solid @editor-dark-toolbar-border-color;
+          &:hover {
+            background-color: black;
+          }
+        }
+      }
+    }
+  }
 }

services/web/frontend/stylesheets/app/editor/hotkeys.less

@@ -1,25 +1,25 @@
 .modal-hotkeys {
-	font-size: 14px;
-	
-	h3:first-child {
-		margin-top: 0;
-	}
-	
-	.hotkey {
-		margin-bottom: @line-height-computed / 2;
-	}
-	
-	.description {
-		display: inline-block;
-	}
-	
-	.combination {
-		padding: 4px 8px;
-		border-radius: 3px;
-		background-color: @gray-dark;
-		color: white;
-		font-family: @font-family-sans-serif;
-		font-weight: 600;
-		margin-right: @line-height-computed / 4;
-	}
-}
+  font-size: 14px;
+
+  h3:first-child {
+    margin-top: 0;
+  }
+
+  .hotkey {
+    margin-bottom: @line-height-computed / 2;
+  }
+
+  .description {
+    display: inline-block;
+  }
+
+  .combination {
+    padding: 4px 8px;
+    border-radius: 3px;
+    background-color: @gray-dark;
+    color: white;
+    font-family: @font-family-sans-serif;
+    font-weight: 600;
+    margin-right: @line-height-computed / 4;
+  }
+}

services/web/frontend/stylesheets/app/editor/left-menu.less

@@ -1,128 +1,128 @@
 #left-menu {
-	position: absolute;
-	width: @left-menu-width;
-	padding: (@line-height-computed / 2);
-	top: 0;
-	bottom: 0;
-	background-color: #f4f4f4;
-	z-index: 100;
-	overflow-y: auto;
-	overflow-x: hidden;
-	-webkit-transition: left ease-in-out @left-menu-animation-duration;
-	transition: left ease-in-out @left-menu-animation-duration;
-	font-size: 14px;
+  position: absolute;
+  width: @left-menu-width;
+  padding: (@line-height-computed / 2);
+  top: 0;
+  bottom: 0;
+  background-color: #f4f4f4;
+  z-index: 100;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-transition: left ease-in-out @left-menu-animation-duration;
+  transition: left ease-in-out @left-menu-animation-duration;
+  font-size: 14px;
 
-	left: -280px;
-	&.shown {
-		left: 0;
-	}
+  left: -280px;
+  &.shown {
+    left: 0;
+  }
 
-	h4 {
-		font-family: @font-family-sans-serif;
-		font-weight: 400;
-		font-size: 1rem;
-		margin: (@line-height-computed / 2) 0;
-		padding-bottom: (@line-height-computed / 4);
-		color: @gray-light;
-		border-bottom: 1px solid @gray-lighter;
-	}
+  h4 {
+    font-family: @font-family-sans-serif;
+    font-weight: 400;
+    font-size: 1rem;
+    margin: (@line-height-computed / 2) 0;
+    padding-bottom: (@line-height-computed / 4);
+    color: @gray-light;
+    border-bottom: 1px solid @gray-lighter;
+  }
 
-	> h4:first-child {
-		margin-top: 0;
-	}
+  > h4:first-child {
+    margin-top: 0;
+  }
 
-	ul.nav {
-		a {
-			cursor: pointer;
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: @link-color;
-				color: white;
-				i {
-					color: white;
-				}
-			}
-			i {
-				color: @gray;
-			}
-			padding: (@line-height-computed / 4);
-			font-weight: 700;
-		}
-		.link-disabled {
-				color: @gray-light;
-		}
-	}
+  ul.nav {
+    a {
+      cursor: pointer;
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: @link-color;
+        color: white;
+        i {
+          color: white;
+        }
+      }
+      i {
+        color: @gray;
+      }
+      padding: (@line-height-computed / 4);
+      font-weight: 700;
+    }
+    .link-disabled {
+      color: @gray-light;
+    }
+  }
 
-	> ul.nav:last-child {
-		margin-bottom: @line-height-computed / 2;
-	}
+  > ul.nav:last-child {
+    margin-bottom: @line-height-computed / 2;
+  }
 
-	ul.nav-downloads {
-		li {
-			display: inline-block;
-			text-align: center;
-			width: 100px;
-			a {
-				color: @gray-dark;
-			}
-			i {
-				margin: (@line-height-computed / 4) 0;
-			}
-		}
-	}
+  ul.nav-downloads {
+    li {
+      display: inline-block;
+      text-align: center;
+      width: 100px;
+      a {
+        color: @gray-dark;
+      }
+      i {
+        margin: (@line-height-computed / 4) 0;
+      }
+    }
+  }
 
-	form.settings {
-		label {
-			font-weight: normal;
-			color: @gray-dark;
-			flex: 1 0 50%;
-			margin-bottom: 0;
-			margin-top: 9px;
-			padding-right: 5px;
-			white-space: nowrap;
-		}
-		select {
-			width: 50%;
-			flex: 0 0 50%;
-			margin: 9px 0;
-		}
-		.form-controls {
-			clear: both;
-			padding: 0 9px;
-			display: flex;
-			flex-wrap: wrap;
-			align-items: baseline;
-			justify-content: flex-end;
-			border-bottom: solid 1px rgba(0, 0, 0, 0.07);
-			&:first-child {
-				margin-top: -9px;
-			}
-			&:last-child {
-				border-bottom: 0;
-			}
-			&:hover {
-				background-color: @link-color;
-				// select.form-control {
-				// 	color: white;
-				// }
-				label,
-				i.fa {
-					color: white;
-				}
-			}
-			&:after {
-				content:"";
-				display:table;
-				clear:both;
-			}
-		}
-	}
+  form.settings {
+    label {
+      font-weight: normal;
+      color: @gray-dark;
+      flex: 1 0 50%;
+      margin-bottom: 0;
+      margin-top: 9px;
+      padding-right: 5px;
+      white-space: nowrap;
+    }
+    select {
+      width: 50%;
+      flex: 0 0 50%;
+      margin: 9px 0;
+    }
+    .form-controls {
+      clear: both;
+      padding: 0 9px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      justify-content: flex-end;
+      border-bottom: solid 1px rgba(0, 0, 0, 0.07);
+      &:first-child {
+        margin-top: -9px;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+      &:hover {
+        background-color: @link-color;
+        // select.form-control {
+        // 	color: white;
+        // }
+        label,
+        i.fa {
+          color: white;
+        }
+      }
+      &:after {
+        content: '';
+        display: table;
+        clear: both;
+      }
+    }
+  }
 }
 
 #left-menu-mask {
-	.full-size;
-	opacity: 0.4;
-	background-color: #999;
-	z-index: 99;
-}
+  .full-size;
+  opacity: 0.4;
+  background-color: #999;
+  z-index: 99;
+}

services/web/frontend/stylesheets/app/editor/online-users.less

@@ -1,44 +1,45 @@
 @online-user-color: rgb(0, 170, 255);
 
 .online-users {
-	display: flex;
+  display: flex;
 
-	.online-user {
-		background-color: @online-user-color;
-		width: 24px;
-		display: inline-block;
-		height: 24px;
-		margin-right: 8px;
-		text-align: center;
-		color: white;
-		text-transform: uppercase;
-		border-radius: 3px;
-		cursor: pointer;
-	}
+  .online-user {
+    background-color: @online-user-color;
+    width: 24px;
+    display: inline-block;
+    height: 24px;
+    margin-right: 8px;
+    text-align: center;
+    color: white;
+    text-transform: uppercase;
+    border-radius: 3px;
+    cursor: pointer;
+  }
 
-	.online-user-multi {
-		width: auto;
-		min-width: 24px;
-		padding-left: 8px;
-		padding-right: 5px;
-		display: flex;
-		align-items: center;
-	}
+  .online-user-multi {
+    width: auto;
+    min-width: 24px;
+    padding-left: 8px;
+    padding-right: 5px;
+    display: flex;
+    align-items: center;
+  }
 
-	.dropdown-menu {
-		margin-right: 8px;
-		a {
-			// Override toolbar link styles
-			display: block;
-			padding: 4px 10px 5px;
-			margin: 1px 2px;
-			color: @text-color;
-			&:hover, &:active {
-				color: @text-color!important;
-				background-color: @gray-lightest;
-				text-shadow: none;
-				.box-shadow(none);
-			}
-		}
-	}
+  .dropdown-menu {
+    margin-right: 8px;
+    a {
+      // Override toolbar link styles
+      display: block;
+      padding: 4px 10px 5px;
+      margin: 1px 2px;
+      color: @text-color;
+      &:hover,
+      &:active {
+        color: @text-color!important;
+        background-color: @gray-lightest;
+        text-shadow: none;
+        .box-shadow(none);
+      }
+    }
+  }
 }

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -1,507 +1,525 @@
 @stripe-width: 20px;
 @keyframes pdf-toolbar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: @stripe-width 0; }
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: @stripe-width 0;
+  }
 }
 
 .pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
-	.toolbar-small-mixin;
-	.toolbar-alt-mixin;
-	padding-right: 5px;
-	&.changes-to-autocompile {
-		#gradient > .striped(@color: rgba(255,255,255,.10), @angle: -45deg);
-		background-size: @stripe-width @stripe-width;
-		.animation(pdf-toolbar-stripes 2s linear infinite);
-	}
-	.auto-compile-status {
-		color: white;
-		margin-right: (@line-height-computed / 2);
-		i {
-			color: @brand-danger;
-		}
-	}
-	.auto-compile-status when (@is-overleaf-light = true) {
-		color: @ol-blue-gray-3;
-	}
-}
-
-.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) and (@is-overleaf-light = false) {
-	border-bottom: 0;
+  .toolbar-small-mixin;
+  .toolbar-alt-mixin;
+  padding-right: 5px;
+  &.changes-to-autocompile {
+    #gradient > .striped(@color: rgba(255, 255, 255, 0.1), @angle: -45deg);
+    background-size: @stripe-width @stripe-width;
+    .animation(pdf-toolbar-stripes 2s linear infinite);
+  }
+  .auto-compile-status {
+    color: white;
+    margin-right: (@line-height-computed / 2);
+    i {
+      color: @brand-danger;
+    }
+  }
+  .auto-compile-status when (@is-overleaf-light = true) {
+    color: @ol-blue-gray-3;
+  }
 }
 
+.pdf
+  .toolbar.toolbar-pdf
+  when
+  (@is-overleaf = true)
+  and
+  (@is-overleaf-light = false) {
+  border-bottom: 0;
+}
 
 .pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
-	.toolbar-tall-mixin;
-	padding: 0 (@line-height-computed / 2);
-	.auto-compile-status {
-		display: none;
-	}
+  .toolbar-tall-mixin;
+  padding: 0 (@line-height-computed / 2);
+  .auto-compile-status {
+    display: none;
+  }
 }
 
 .pdf {
-	background-color: @pdf-bg;
+  background-color: @pdf-bg;
 }
 
-.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
-	.full-size;
-	top: @pdf-top-offset;
+.pdf-viewer,
+.pdf-logs,
+.pdf-errors,
+.pdf-uncompiled {
+  .full-size;
+  top: @pdf-top-offset;
 }
 
-.pdf-logs, .pdf-errors, .pdf-uncompiled, .pdf-validation-problems{
-	padding: @line-height-computed / 2;
+.pdf-logs,
+.pdf-errors,
+.pdf-uncompiled,
+.pdf-validation-problems {
+  padding: @line-height-computed / 2;
 }
 
 .pdf-uncompiled {
-	.fa {
-		color: @blue;
-	}
+  .fa {
+    color: @blue;
+  }
 }
 
 .btn-recompile-group when (@is-overleaf = true) {
-	align-self: stretch;
-	margin-right: 6px;
-	.btn-recompile {
-		height: 100%;
-		.btn-primary;
-		padding-top: 3px;
-		padding-bottom: 3px;
-		&:first-child {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
-		}
-		&[disabled] {
-			background-color: mix(@btn-primary-bg, @toolbar-alt-bg-color, 65%);
-			.opacity(1.0);
-		}
-	}
+  align-self: stretch;
+  margin-right: 6px;
+  .btn-recompile {
+    height: 100%;
+    .btn-primary;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    &:first-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &[disabled] {
+      background-color: mix(@btn-primary-bg, @toolbar-alt-bg-color, 65%);
+      .opacity(1);
+    }
+  }
 }
 
 .btn-recompile-group when (@is-overleaf = false) {
-	margin-right: (@line-height-computed / 2);
-	.btn-recompile {
-		.btn-info;
-	}
+  margin-right: (@line-height-computed / 2);
+  .btn-recompile {
+    .btn-info;
+  }
 }
 
 .btn-split-screen when (@is-overleaf = false) {
-	.fa {
-		display: none;
-	}
+  .fa {
+    display: none;
+  }
 }
 .btn-split-screen when (@is-overleaf = true) {
-	.fa {
-		display: none;
-	}
+  .fa {
+    display: none;
+  }
 }
 
 .pdf-viewer {
-	iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-	}
-	.pdfjs-viewer {
-		.full-size;
-		background-color: @pdfjs-bg;
-		overflow: scroll;
-		canvas, div.pdf-canvas {
-			background: white;
-			box-shadow: @pdf-page-shadow-color 0px 0px 10px;
-		}
-		div.pdf-canvas.pdfng-empty {
-			background-color: white;
-		}
-		div.pdf-canvas.pdfng-loading {
-			background-color: white;
-		}
-		.page-container {
-			margin: 10px auto;
-			padding: 0 10px;
-			box-sizing: content-box;
-			user-select: none;
-		}
-	}
-	.progress-thin {
-		position: absolute;
-		top: -2px;
-		height: 3px;
-		left: 0;
-		right: 0;
-		.progress-bar {
-			height: 100%;
-			background-color: @link-color;
-		}
-	}
-	.pdfjs-controls {
-		position: absolute;
-		padding: @line-height-computed / 2;
-		top: 0;
-		left: 0;
-		display: inline-block;
-		.btn-group {
-			transition: opacity 0.5s ease, visibility 0 linear 0.5s;
-			visibility: hidden;
-			opacity: 0;
-		}
-		&:hover, &.flash {
-			.btn-group {
-				transition: none;
-				visibility: visible;
-				opacity: 1;
-			}
-		}
-		i.fa-arrows-h {
-			border-right: 2px solid white;
-			border-left: 2px solid white;
-		}
-		i.fa-arrows-v {
-			border-top: 2px solid white;
-			border-bottom: 2px solid white;
-		}
-	}
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+  .pdfjs-viewer {
+    .full-size;
+    background-color: @pdfjs-bg;
+    overflow: scroll;
+    canvas,
+    div.pdf-canvas {
+      background: white;
+      box-shadow: @pdf-page-shadow-color 0px 0px 10px;
+    }
+    div.pdf-canvas.pdfng-empty {
+      background-color: white;
+    }
+    div.pdf-canvas.pdfng-loading {
+      background-color: white;
+    }
+    .page-container {
+      margin: 10px auto;
+      padding: 0 10px;
+      box-sizing: content-box;
+      user-select: none;
+    }
+  }
+  .progress-thin {
+    position: absolute;
+    top: -2px;
+    height: 3px;
+    left: 0;
+    right: 0;
+    .progress-bar {
+      height: 100%;
+      background-color: @link-color;
+    }
+  }
+  .pdfjs-controls {
+    position: absolute;
+    padding: @line-height-computed / 2;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    .btn-group {
+      transition: opacity 0.5s ease, visibility 0 linear 0.5s;
+      visibility: hidden;
+      opacity: 0;
+    }
+    &:hover,
+    &.flash {
+      .btn-group {
+        transition: none;
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+    i.fa-arrows-h {
+      border-right: 2px solid white;
+      border-left: 2px solid white;
+    }
+    i.fa-arrows-v {
+      border-top: 2px solid white;
+      border-bottom: 2px solid white;
+    }
+  }
 }
 
 .pdf .toolbar {
-	.toolbar-right {
-		a {
-			&:hover {
-				i when (@is-overleaf = false) {
-					box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-					border-color: @gray-dark;
-				}
-			}
-			i when (@is-overleaf = false) {
-				display: inline-block;
-				width: 16px;
-				height: 16px;
-				border: 1px solid @gray-light;
-			}
-
-			i.full-screen {
-				border-top-width: 3px;
-				border-radius: 2px;
-			}
-
-			i.full-screen when (@is-overleaf = true) {
-				display: none;
-			}
-			i.split-screen {
-				width: 7px;
-				border-top-width: 3px;
-				border-radius: 2px;
-				margin-left: 2px;
-			}
-
-			i.split-screen when (@is-overleaf = true) {
-				display: none;
-			}
-
-			i.fa when (@is-overleaf = false) {
-				display: none;
-			}
-		}
-	}
+  .toolbar-right {
+    a {
+      &:hover {
+        i when (@is-overleaf = false) {
+          box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
+          border-color: @gray-dark;
+        }
+      }
+      i when (@is-overleaf = false) {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border: 1px solid @gray-light;
+      }
+
+      i.full-screen {
+        border-top-width: 3px;
+        border-radius: 2px;
+      }
+
+      i.full-screen when (@is-overleaf = true) {
+        display: none;
+      }
+      i.split-screen {
+        width: 7px;
+        border-top-width: 3px;
+        border-radius: 2px;
+        margin-left: 2px;
+      }
+
+      i.split-screen when (@is-overleaf = true) {
+        display: none;
+      }
+
+      i.fa when (@is-overleaf = false) {
+        display: none;
+      }
+    }
+  }
 }
 
 .pdf-logs {
-	overflow: auto;
-	.alert {
-		font-size: 0.9rem;
-		margin-bottom: @line-height-computed / 2;
-		cursor: pointer;
-		.line-no {
-			float: right;
-			color: @log-line-no-color;
-			font-weight: 700;
-
-			.fa {
-				opacity: 0;
-			}
-		}
-		.entry-message {
-			font-weight: 700;
-			//font-family: @font-family-monospace;
-		}
-		.entry-content {
-			white-space: pre-wrap;
-			font-size: 0.8rem;
-			//font-family: @font-family-monospace;
-		}
-
-		&:hover .line-no {
-			color: inherit;
-			.fa {
-				opacity: 1;
-			}
-		}
-
-		&.alert-danger {
-			background-color: tint(@alert-danger-bg, 15%);
-			&:hover {
-				background-color: @alert-danger-bg;
-			}
-		}
-
-		&.alert-warning {
-			background-color: tint(@alert-warning-bg, 15%);
-			&:hover {
-				background-color: @alert-warning-bg;
-			}
-		}
-
-		&.alert-info {
-			background-color: tint(@alert-info-bg, 15%);
-			&:hover {
-				background-color: @alert-info-bg;
-			}
-		}
-
-	}
-	pre {
-		font-size: 12px;
-	}
-	.dropdown {
-		position: relative;
-	}
-	.force-recompile {
-		margin-top: 10px;
-		text-align: right;
-	}
+  overflow: auto;
+  .alert {
+    font-size: 0.9rem;
+    margin-bottom: @line-height-computed / 2;
+    cursor: pointer;
+    .line-no {
+      float: right;
+      color: @log-line-no-color;
+      font-weight: 700;
+
+      .fa {
+        opacity: 0;
+      }
+    }
+    .entry-message {
+      font-weight: 700;
+      //font-family: @font-family-monospace;
+    }
+    .entry-content {
+      white-space: pre-wrap;
+      font-size: 0.8rem;
+      //font-family: @font-family-monospace;
+    }
+
+    &:hover .line-no {
+      color: inherit;
+      .fa {
+        opacity: 1;
+      }
+    }
+
+    &.alert-danger {
+      background-color: tint(@alert-danger-bg, 15%);
+      &:hover {
+        background-color: @alert-danger-bg;
+      }
+    }
+
+    &.alert-warning {
+      background-color: tint(@alert-warning-bg, 15%);
+      &:hover {
+        background-color: @alert-warning-bg;
+      }
+    }
+
+    &.alert-info {
+      background-color: tint(@alert-info-bg, 15%);
+      &:hover {
+        background-color: @alert-info-bg;
+      }
+    }
+  }
+  pre {
+    font-size: 12px;
+  }
+  .dropdown {
+    position: relative;
+  }
+  .force-recompile {
+    margin-top: 10px;
+    text-align: right;
+  }
 }
 
 .synctex-controls {
-	position: absolute;
-	z-index: @synctex-controls-z-index;
-	padding: @synctex-controls-padding;
-	top: 68px;
+  position: absolute;
+  z-index: @synctex-controls-z-index;
+  padding: @synctex-controls-padding;
+  top: 68px;
 }
 
 .synctex-controls when (@is-overleaf = true) {
-	margin-right: -8px;
-}
-	.synctex-control {
-		display: block;
-		margin-bottom: 3px;
-
-		> .synctex-control-icon {
-			display: inline-block;
-			font: normal normal normal 14px/1 FontAwesome;
-			font-size: inherit;
-			text-rendering: auto;
-			-webkit-font-smoothing: antialiased;
-			-moz-osx-font-smoothing: grayscale;
-		}
-	}
-
-	.synctex-control when (@is-overleaf = true) {
-		@ol-synctex-control-size: 24px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1em;
-		width: @ol-synctex-control-size;
-		height: @ol-synctex-control-size;
-		border-radius: @ol-synctex-control-size / 2;
-		padding: 0 0 2px;
-		background-color: fade(@btn-default-bg, 80%);
-		transition: background 0.15s ease;
-		margin-bottom: @ol-synctex-control-size / 2;
-	}
-
-	.synctex-control when (@is-overleaf = false) {
-		line-height: 1.3;
-		padding: 0 2px;
-	}
-
-	.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
-		text-indent: 1px; // "Optical" adjustment.
-		&::before {
-			content: "\f061";
-		}
-	}
-	.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
-		text-indent: -1px; // "Optical" adjustment.
-		&::before {
-			content: "\f060";
-		}
-	}
-
-	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {
-		content: "\f178";
-	}
-	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
-		content: "\f177";
-	}
+  margin-right: -8px;
+}
+.synctex-control {
+  display: block;
+  margin-bottom: 3px;
+
+  > .synctex-control-icon {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.synctex-control when (@is-overleaf = true) {
+  @ol-synctex-control-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1em;
+  width: @ol-synctex-control-size;
+  height: @ol-synctex-control-size;
+  border-radius: @ol-synctex-control-size / 2;
+  padding: 0 0 2px;
+  background-color: fade(@btn-default-bg, 80%);
+  transition: background 0.15s ease;
+  margin-bottom: @ol-synctex-control-size / 2;
+}
+
+.synctex-control when (@is-overleaf = false) {
+  line-height: 1.3;
+  padding: 0 2px;
+}
+
+.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
+  text-indent: 1px; // "Optical" adjustment.
+  &::before {
+    content: '\f061';
+  }
+}
+.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
+  text-indent: -1px; // "Optical" adjustment.
+  &::before {
+    content: '\f060';
+  }
+}
+
+.synctex-control-goto-pdf
+  > .synctex-control-icon::before
+  when
+  (@is-overleaf = false) {
+  content: '\f178';
+}
+.synctex-control-goto-code
+  > .synctex-control-icon::before
+  when
+  (@is-overleaf = false) {
+  content: '\f177';
+}
 
 .editor-dark {
-	.pdf-logs {
-		background-color: lighten(@editor-dark-background-color, 10%);
-	}
-	.pdfjs-viewer {
-		background-color: lighten(@editor-dark-background-color, 10%);
-	}
-	.pdf .toolbar {
-		.toolbar-right a {
-			i {
-				border-color: @gray;
-			}
-			&:hover {
-				i {
-					border-color: @gray-light;
-				}
-			}
-		}
-	}
+  .pdf-logs {
+    background-color: lighten(@editor-dark-background-color, 10%);
+  }
+  .pdfjs-viewer {
+    background-color: lighten(@editor-dark-background-color, 10%);
+  }
+  .pdf .toolbar {
+    .toolbar-right a {
+      i {
+        border-color: @gray;
+      }
+      &:hover {
+        i {
+          border-color: @gray-light;
+        }
+      }
+    }
+  }
 }
 
 .keyboard-tooltip {
-	.tooltip-inner {
-		max-width: none;
-	}
+  .tooltip-inner {
+    max-width: none;
+  }
 }
 
 .keyboard-shortcut {
-	white-space: nowrap;
+  white-space: nowrap;
 }
 
-
 @keyframes expand-feedback-area {
-	from {
-		max-height: 0;
-	}
+  from {
+    max-height: 0;
+  }
 
-	to {
-		max-height: 500px;
-	}
+  to {
+    max-height: 500px;
+  }
 }
 
 .card-hint:extend(.card-thin) {
-	margin-top: 10px;
-	padding-bottom: 7px;
-	cursor: default;
-
-	&-icon-container {
-		background: currentColor;
-		width: 2.5rem;
-		height: 2.5rem;
-		font-size: 1.5rem;
-		text-align: center;
-		border-radius: 50%;
-		float: left;
-		margin-right: 10px;
-
-		.fa {
-			color: #FFF;
-		}
-
-		.alert-danger & {
-			color: @state-danger-border;
-		}
-
-		.alert-warning & {
-			color: @state-warning-border;
-		}
-
-		.alert-info & {
-			color: @state-info-border;
-		}
-
-	}
-
-	&-text,
-	&-feedback-label {
-		color: @log-hints-color;
-		font-size: 0.9rem;
-		margin-bottom: 20px;
-	}
-
-	&-text {
-		min-height: 35px;
-	}
-
-	&-feedback-label {
-		font-size: inherit;
-		margin-right: 0.5em;
-		margin-bottom: 0;
-		font-weight: normal;
-	}
-
-	&-ext-link,
-	&-feedback {
-		display: inline-block;
-		font-size: 0.8rem;
-	}
-
-	&-footer a,
-	&-text a {
-		.alert-danger & {
-			color: @state-danger-text;
-		}
-
-		.alert-warning & {
-			color: @state-warning-text;
-		}
-
-		.alert-info & {
-			color: @state-info-text;
-		}
-	}
-
-	&-feedback {
-		color: @log-hints-color;
-		float: right;
-	}
-
-	&-extra-feedback {
-		color: @log-hints-color;
-		font-size: 0.8rem;
-		margin-top: 10px;
-		padding-bottom: 5px;
-		animation: 0.5s ease-out expand-feedback-area;
-		overflow: hidden;
-
-		&-label {
-			margin: 5px 0 10px;
-			padding-top: 5px;
-			border-top: solid 1px @gray-lighter;
-		}
-
-		.radio {
-			margin: 5px;
-		}
-
-		textarea {
-			font-size: 0.8rem;
-			margin-bottom: 10px;
-			padding: 5px;
-		}
-
-		input[type="radio"] {
-			margin-top: 2px;
-		}
-	}
-
-	& + p {
-		margin-top: 20px;
-	}
-
+  margin-top: 10px;
+  padding-bottom: 7px;
+  cursor: default;
+
+  &-icon-container {
+    background: currentColor;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.5rem;
+    text-align: center;
+    border-radius: 50%;
+    float: left;
+    margin-right: 10px;
+
+    .fa {
+      color: #fff;
+    }
+
+    .alert-danger & {
+      color: @state-danger-border;
+    }
+
+    .alert-warning & {
+      color: @state-warning-border;
+    }
+
+    .alert-info & {
+      color: @state-info-border;
+    }
+  }
+
+  &-text,
+  &-feedback-label {
+    color: @log-hints-color;
+    font-size: 0.9rem;
+    margin-bottom: 20px;
+  }
+
+  &-text {
+    min-height: 35px;
+  }
+
+  &-feedback-label {
+    font-size: inherit;
+    margin-right: 0.5em;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+
+  &-ext-link,
+  &-feedback {
+    display: inline-block;
+    font-size: 0.8rem;
+  }
+
+  &-footer a,
+  &-text a {
+    .alert-danger & {
+      color: @state-danger-text;
+    }
+
+    .alert-warning & {
+      color: @state-warning-text;
+    }
+
+    .alert-info & {
+      color: @state-info-text;
+    }
+  }
+
+  &-feedback {
+    color: @log-hints-color;
+    float: right;
+  }
+
+  &-extra-feedback {
+    color: @log-hints-color;
+    font-size: 0.8rem;
+    margin-top: 10px;
+    padding-bottom: 5px;
+    animation: 0.5s ease-out expand-feedback-area;
+    overflow: hidden;
+
+    &-label {
+      margin: 5px 0 10px;
+      padding-top: 5px;
+      border-top: solid 1px @gray-lighter;
+    }
+
+    .radio {
+      margin: 5px;
+    }
+
+    textarea {
+      font-size: 0.8rem;
+      margin-bottom: 10px;
+      padding: 5px;
+    }
+
+    input[type='radio'] {
+      margin-top: 2px;
+    }
+  }
+
+  & + p {
+    margin-top: 20px;
+  }
 }
 
 .files-dropdown-container {
-	.pull-right();
-	position: relative;
+  .pull-right();
+  position: relative;
 }
 
-	.files-dropdown {
-		display: inline-block;
-	}
+.files-dropdown {
+  display: inline-block;
+}
 
 .plv-text-layer {
-	display: none;
-	user-select: text;
+  display: none;
+  user-select: text;
 
-	.pdf-page-container:hover &,
-	.pdfjs-viewer-show-text & {
-		display: block;
-	}
+  .pdf-page-container:hover &,
+  .pdfjs-viewer-show-text & {
+    display: block;
+  }
 }

services/web/frontend/stylesheets/app/editor/publish-template.less

@@ -1,3 +1,3 @@
 .publishedDetails {
-	color: @gray;
+  color: @gray;
 }

services/web/frontend/stylesheets/app/editor/review-panel.less

@@ -1,1179 +1,1201 @@
-@rp-base-font-size      : 12px;
-@rp-small-font-size     : 10px;
-@rp-icon-large-size     : 18px;
+@rp-base-font-size : 12px;
+@rp-small-font-size : 10px;
+@rp-icon-large-size : 18px;
 
-@rp-bg-blue             : #dadfed;
-@rp-bg-dim-blue         : #fafafa;
-@rp-highlight-blue      : #8a96b5;
+@rp-bg-blue : #dadfed;
+@rp-bg-dim-blue : #fafafa;
+@rp-highlight-blue : #8a96b5;
 
-@rp-border-grey         : #d9d9d9;
+@rp-border-grey : #d9d9d9;
 
-@rp-green               : #2c8e30;
-@rp-green-on-dark		: rgba(37, 107, 41, 0.5);
-@rp-red                 : #c5060b;
-@rp-yellow              : #f3b111;
-@rp-yellow-on-dark		: rgba(194, 93, 11, 0.5);
-@rp-grey                : #aaaaaa;
+@rp-green : #2c8e30;
+@rp-green-on-dark : rgba(37, 107, 41, 0.5);
+@rp-red : #c5060b;
+@rp-yellow : #f3b111;
+@rp-yellow-on-dark : rgba(194, 93, 11, 0.5);
+@rp-grey : #aaaaaa;
 
-@rp-type-blue           : #6b7797;
-@rp-type-darkgrey       : #3f3f3f;
+@rp-type-blue : #6b7797;
+@rp-type-darkgrey : #3f3f3f;
 
-@rp-entry-ribbon-width  : 4px;
-@rp-entry-arrow-width   : 6px;
-@rp-semibold-weight     : 600;
-@review-panel-width     : 230px;
-@review-off-width       : 22px;
+@rp-entry-ribbon-width : 4px;
+@rp-entry-arrow-width : 6px;
+@rp-semibold-weight : 600;
+@review-panel-width : 230px;
+@review-off-width : 22px;
 
-@rp-toolbar-height      : 32px;
+@rp-toolbar-height : 32px;
 
 @rp-entry-animation-speed: 0.3s;
 
-
-
 .rp-button() {
-	display: block; // IE doesn't do flex with inline items.
-	background-color: @rp-highlight-blue;
-	color: #FFF;
-	text-align: center;
-	line-height: 1.3;
-	user-select: none;
-	border: 0;
-
-	&:hover,
-	&:focus {
-		outline: 0;
-		background-color: darken(@rp-highlight-blue, 5%);
-		text-decoration: none;
-		color: #FFF;
-	}
-
-	&[disabled] {
-		background-color: tint(@rp-highlight-blue, 50%);
-
-		&:hover,
-		&:focus {
-			background-color: tint(@rp-highlight-blue, 50%);
-		}
-	}
+  display: block; // IE doesn't do flex with inline items.
+  background-color: @rp-highlight-blue;
+  color: #fff;
+  text-align: center;
+  line-height: 1.3;
+  user-select: none;
+  border: 0;
+
+  &:hover,
+  &:focus {
+    outline: 0;
+    background-color: darken(@rp-highlight-blue, 5%);
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &[disabled] {
+    background-color: tint(@rp-highlight-blue, 50%);
+
+    &:hover,
+    &:focus {
+      background-color: tint(@rp-highlight-blue, 50%);
+    }
+  }
 }
 
 .rp-collapse-arrow() {
-	display: inline-block;
-	transform: rotateZ(0deg);
-	transition: transform 0.15s ease;
-	&-on {
-		transform: rotateZ(-90deg);
-	}
+  display: inline-block;
+  transform: rotateZ(0deg);
+  transition: transform 0.15s ease;
+  &-on {
+    transform: rotateZ(-90deg);
+  }
 }
 
 .triangle(@_, @width, @height, @color) {
-	position: absolute;
-	border-color: transparent;
-	border-style: solid;
-	width: 0;
-	height: 0;
-}
-	.triangle(top, @width, @height, @color) {
-		border-width: 0 @width/2 @height @width/2;
-		border-bottom-color: @color;
-		border-left-color: transparent;
-		border-right-color: transparent;
-	}
-	.triangle(bottom, @width, @height, @color) {
-		border-width: @height @width/2 0 @width/2;
-		border-top-color: @color;
-		border-left-color: transparent;
-		border-right-color: transparent;
-	}
-	.triangle(right, @width, @height, @color) {
-		border-width: @height/2 0 @height/2 @width;
-		border-left-color: @color;
-		border-top-color: transparent;
-		border-bottom-color: transparent;
-	}
-	.triangle(left, @width, @height, @color) {
-		border-width: @height/2 @width @height/2 0;
-		border-right-color: @color;
-		border-top-color: transparent;
-		border-bottom-color: transparent;
-	}
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+  width: 0;
+  height: 0;
+}
+.triangle(top, @width, @height, @color) {
+  border-width: 0 @width / 2 @height @width / 2;
+  border-bottom-color: @color;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.triangle(bottom, @width, @height, @color) {
+  border-width: @height @width / 2 0 @width / 2;
+  border-top-color: @color;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.triangle(right, @width, @height, @color) {
+  border-width: @height / 2 0 @height / 2 @width;
+  border-left-color: @color;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+.triangle(left, @width, @height, @color) {
+  border-width: @height / 2 @width @height / 2 0;
+  border-right-color: @color;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
 
 #review-panel {
-	display: block;
-	.rp-size-expanded & {
-		display: flex;
-		flex-direction: column;
-		width: @review-panel-width;
-		overflow: visible;
-		border-left-width: 1px;
-	}
-	.rp-size-mini & {
-		width: @review-off-width;
-		z-index: 6;
-		border-left-width: 1px;
-	}
-	
-	position: absolute;
-	top: 32px;
-	bottom: 0px;
-	right: 0px;
-	background-color: @rp-bg-blue;
-	border-left: solid 0px @rp-border-grey;
-	font-size: @rp-base-font-size;
-	color: @rp-type-blue;
-	z-index: 6;
+  display: block;
+  .rp-size-expanded & {
+    display: flex;
+    flex-direction: column;
+    width: @review-panel-width;
+    overflow: visible;
+    border-left-width: 1px;
+  }
+  .rp-size-mini & {
+    width: @review-off-width;
+    z-index: 6;
+    border-left-width: 1px;
+  }
+
+  position: absolute;
+  top: 32px;
+  bottom: 0px;
+  right: 0px;
+  background-color: @rp-bg-blue;
+  border-left: solid 0px @rp-border-grey;
+  font-size: @rp-base-font-size;
+  color: @rp-type-blue;
+  z-index: 6;
 }
 
 .loading-panel {
-	.rp-size-expanded & {
-		right: @review-panel-width;
-	}
+  .rp-size-expanded & {
+    right: @review-panel-width;
+  }
 }
 
 .review-panel-toolbar {
-	display: none;
-	.rp-size-expanded & {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 5px;
-	}
-
-	.rp-unsupported & {
-		display: none;
-	}
-
-	position: relative;
-	border-bottom: 1px solid @rp-border-grey;
-	background-color: @rp-bg-dim-blue;
-	text-align: center;
-	z-index: 3;
-	flex-basis: 32px;
-	flex-shrink: 0;
-}
-	.review-panel-toolbar-label {
-		cursor: pointer;
-		text-align: right;
-		flex-grow: 1;
-	}
-		.review-panel-toolbar-icon-on {
-			margin-right: 5px;
-			color: @red;
-		}
-		.review-panel-toolbar-label-disabled {
-			cursor: auto;
-			margin-right: 5px;
-		}
-	.review-panel-toolbar-spinner {
-		margin-left: 5px;
-	}
-	.rp-tc-state {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		right: 0;
-		overflow: hidden;
-		list-style: none;
-		padding: 0 5px;
-		margin: 0;
-		border-bottom: 1px solid @rp-border-grey;
-		background-color: @rp-bg-dim-blue;
-		text-align: left;
-	}
-		.rp-tc-state-collapse {
-			.rp-collapse-arrow;
-			margin-left: 5px;
-		}
-		.rp-tc-state-item {
-			display: flex;
-			align-items: center;
-			padding: 3px 0;	
-			&:last-of-type {
-				padding-bottom: 5px;
-			}
-		}
-		.rp-tc-state-separator {
-			border-bottom: 1px solid @rp-border-grey;
-		}
-		.rp-tc-state-item-everyone {
-			border-bottom: 1px solid @rp-border-grey;
-			color: @red;
-		}
-			.rp-tc-state-item-name {
-				flex-grow: 1;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				font-weight: @rp-semibold-weight;
-			}
-			.rp-tc-state-item-name-disabled {
-				opacity: .35;
-			}
-		.rp-tc-state-item-guests {
-			color: @blue;
-		}
+  display: none;
+  .rp-size-expanded & {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px;
+  }
+
+  .rp-unsupported & {
+    display: none;
+  }
+
+  position: relative;
+  border-bottom: 1px solid @rp-border-grey;
+  background-color: @rp-bg-dim-blue;
+  text-align: center;
+  z-index: 3;
+  flex-basis: 32px;
+  flex-shrink: 0;
+}
+.review-panel-toolbar-label {
+  cursor: pointer;
+  text-align: right;
+  flex-grow: 1;
+}
+.review-panel-toolbar-icon-on {
+  margin-right: 5px;
+  color: @red;
+}
+.review-panel-toolbar-label-disabled {
+  cursor: auto;
+  margin-right: 5px;
+}
+.review-panel-toolbar-spinner {
+  margin-left: 5px;
+}
+.rp-tc-state {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  list-style: none;
+  padding: 0 5px;
+  margin: 0;
+  border-bottom: 1px solid @rp-border-grey;
+  background-color: @rp-bg-dim-blue;
+  text-align: left;
+}
+.rp-tc-state-collapse {
+  .rp-collapse-arrow;
+  margin-left: 5px;
+}
+.rp-tc-state-item {
+  display: flex;
+  align-items: center;
+  padding: 3px 0;
+  &:last-of-type {
+    padding-bottom: 5px;
+  }
+}
+.rp-tc-state-separator {
+  border-bottom: 1px solid @rp-border-grey;
+}
+.rp-tc-state-item-everyone {
+  border-bottom: 1px solid @rp-border-grey;
+  color: @red;
+}
+.rp-tc-state-item-name {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: @rp-semibold-weight;
+}
+.rp-tc-state-item-name-disabled {
+  opacity: 0.35;
+}
+.rp-tc-state-item-guests {
+  color: @blue;
+}
 
 .rp-entry-list {
-	display: none;
-	width: 100%;
-
-	.rp-size-expanded &,
-	.rp-size-mini & {
-		display: block;
-	}
-
-	.rp-unsupported & {
-		display: none;
-	}
-	
-	.rp-state-current-file & {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		padding-bottom: 52px;
-	}
-	
-	.rp-state-overview & {
-		flex-grow: 2;
-		overflow-y: auto;
-	}
+  display: none;
+  width: 100%;
+
+  .rp-size-expanded &,
+  .rp-size-mini & {
+    display: block;
+  }
+
+  .rp-unsupported & {
+    display: none;
+  }
+
+  .rp-state-current-file & {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    padding-bottom: 52px;
+  }
+
+  .rp-state-overview & {
+    flex-grow: 2;
+    overflow-y: auto;
+  }
 }
 
 .rp-entry-list-inner {
-	position: relative;
+  position: relative;
 }
 
 .rp-entry-indicator {
-	display: none;
-	.rp-size-mini & {
-		display: block;
-	}
-	.rp-size-mini &-add-comment {
-		display: none;
-	}
-	position: absolute;
-	left: 2px;
-	right: 2px;
-	text-align: center;
-	background-color: @rp-highlight-blue;
-	border-radius: 3px;
-	color: #FFF;
-	cursor: pointer;
-	transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
-	.no-animate & {
-		transition: none;
-	}
-	
-	&-focused {
-		left: 0px;
-		right: 4px;
-		z-index: 1;
-	}
-
+  display: none;
+  .rp-size-mini & {
+    display: block;
+  }
+  .rp-size-mini &-add-comment {
+    display: none;
+  }
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  text-align: center;
+  background-color: @rp-highlight-blue;
+  border-radius: 3px;
+  color: #fff;
+  cursor: pointer;
+  transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
+  .no-animate & {
+    transition: none;
+  }
+
+  &-focused {
+    left: 0px;
+    right: 4px;
+    z-index: 1;
+  }
 }
 
 .rp-entry-wrapper {
-	&:hover .rp-entry-insert,
-	&:hover .rp-entry-delete,
-	&:hover .rp-entry-aggregate,
-	&:hover .rp-entry-comment {
-		display: block;
-	}
+  &:hover .rp-entry-insert,
+  &:hover .rp-entry-delete,
+  &:hover .rp-entry-aggregate,
+  &:hover .rp-entry-comment {
+    display: block;
+  }
 }
 
 .rp-entry {
-	.rp-state-current-file & {
-		position: absolute;
-		width: @review-panel-width;
-	}
-	.rp-state-current-file-mini & {
-		display: none;
-		left: @review-off-width + @rp-entry-arrow-width;
-		box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
-		z-index: 1;
-
-		&::before {
-			content: '';
-			position: absolute;
-			top:  -(@review-off-width + @rp-entry-arrow-width);
-			right: -(@review-off-width + @rp-entry-arrow-width);
-			bottom: -(@review-off-width + @rp-entry-arrow-width);
-			left: -(2 * @rp-entry-arrow-width + 2);
-			z-index: -1;
-		}
-		&::after {
-			.triangle(left, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit);
-			top: (@review-off-width / 2) - @rp-entry-arrow-width;
-			left: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
-			content: '';
-		}
-	}
-	.rp-state-current-file-mini.rp-layout-left & {
-		left: auto;
-		right: @review-off-width + @rp-entry-arrow-width;
-		border-left-width: 0;
-		border-right-width: @rp-entry-ribbon-width;
-		border-right-style: solid;
-
-		&::before {
-			left: -(@review-off-width + @rp-entry-arrow-width);
-			right: -(2 * @rp-entry-arrow-width + 2);
-		}
-		&::after {
-			.triangle(right, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit);
-			right: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
-			left: auto;
-		}
-	}
-	.rp-state-current-file-expanded & {
-		visibility: hidden;
-		left: 5px;
-		right: 5px;
-		width: auto;
-
-		&-focused {
-			left: -2px;
-			right: 12px;
-			z-index: 1;
-		}
-
-		&-add-comment {
-			right: auto;
-
-			&.rp-entry-adding-comment {
-				right: 5px;
-			}
-		}
-		&-bulk-actions {
-			right: auto;
-		}
-	}
-	.rp-state-overview & {
-		border-radius: 0;
-		border-bottom: solid 1px @rp-border-grey;
-		cursor: pointer;
-	}
-	.resolved-comments-dropdown & {
-		position: static;
-		margin-bottom: 5px;
-	}
-
-	border-left: solid @rp-entry-ribbon-width transparent;
-	border-radius: 3px;
-	background-color: #FFF;
-	transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
-	.no-animate & {
-		transition: none;
-	}
-
-	&-insert,
-	&-aggregate {
-		border-color: @rp-green;
-	}
-
-	&-delete {
-		border-color: @rp-red;
-	}
-
-	&-comment {
-		border-color: @rp-yellow;
-	}
-	
-	&-comment-resolving {
-		top: 4px;
-		left: 6px;
-		opacity: 0;
-		z-index: 3;
-		transform: scale(.1);
-		transform-origin: 0 0;
-		transition: top .35s ease-out, left .35s ease-out, transform .35s ease-out, opacity .35s ease-out .2s;
-	}
-	
-	&-comment-resolved {
-		border-color: @rp-grey;
-		background-color: #efefef;
-	}
-
-	&-add-comment {
-		background-color: transparent;
-		right: auto;
-		border-left-width: 0;
-
-		&.rp-entry-adding-comment {
-			background-color: #FFF;
-			right: 5px;
-			border-left-width: 3px;
-			border-left-color: @rp-yellow;
-		}
-	}
-
-	&-bulk-actions {
-		background-color: transparent;
-		right: auto;
-		border-left-width: 0;
-	}
-}
-	.rp-entry-body {
-		display: flex;
-		align-items: center;
-		padding: 4px 5px;
-	}
-		.rp-entry-action-icon {
-			font-size: @rp-icon-large-size;
-			padding: 0 3px;
-			line-height: 0;
-
-			.rp-state-overview & {
-				display: none;
-			}
-		}
-
-		.rp-entry-details {
-			line-height: 1.4;
-			margin-left: 5px;
-			// We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0).
-			// This is needed to ensure that IE makes the element fill the available space. 
-			flex: 1 0 1px; 
-			overflow-x: auto;
-
-			.rp-state-overview & {
-				margin-left: 0;
-			}
-		}
-
-			.rp-entry-metadata {
-				font-size: @rp-small-font-size;
-			}
-				.rp-entry-user {
-					font-weight: @rp-semibold-weight;
-					font-style: normal;
-				}
-				.rp-comment-actions {
-					a { color: @rp-type-blue; }
-				}
-
-			.rp-content-highlight {
-				color: @rp-type-darkgrey;
-				font-weight: @rp-semibold-weight;
-				text-decoration: none;
-
-				del& {
-					text-decoration: line-through;
-				}
-			}
-
-	.rp-entry-actions {
-		display: flex;
-
-		.rp-state-overview .rp-entry-list & {
-			display: none;
-		}
-	}
-		.rp-entry-button {
-			.rp-button();
-			flex: 1 1 50%;
-			border-right: solid 1px #FFF;
-			padding: 2px 0;
-
-			&:last-child {
-				border-bottom-right-radius: 3px;
-				border-right-width: 0;
-			}
-
-			.rp-state-current-file-mini.rp-layout-left & {
-				&:first-child {
-					border-bottom-left-radius: 3px;
-				}
-				&:last-child {
-					border-bottom-right-radius: 0;
-				}
-			}
-		}
-
-	.rp-comment {
-		margin: 2px 5px;
-		padding-bottom: 3px;
-		line-height: 1.4;
-		border-bottom: solid 1px @rp-border-grey;
-
-		&:last-child {
-			margin-bottom: 2px;
-			border-bottom-width: 0;
-		}
-
-		.rp-state-overview .rp-entry-list & {
-			margin: 4px 5px;
-
-			&:first-child {
-				margin-top: 0;
-				padding-top: 4px;
-			}
-		}
-	}
-		.rp-comment-content {
-			margin: 0;
-			color: @rp-type-darkgrey;
-			overflow-x: auto; // Long words, like links can overflow without this.
-		}
-	
-	.rp-comment-resolver {
-		color: @rp-type-blue;
-	}
-		.rp-comment-resolver-content {
-			font-style: italic;
-			margin: 0;
-		}
-
-	.rp-comment-reply {
-		padding: 0 5px;
-	}
-
-	.rp-add-comment-btn,
-	.rp-bulk-actions-btn {
-		.rp-button();
-		display: inline-block;
-		padding: 5px 10px;
-		border-radius: 3px;
-
-		.rp-in-editor-widgets & {
-			display: block;
-			white-space: nowrap;
-			border-radius: 0;
-
-			&:last-child {
-				border-bottom-left-radius: 3px;
-			}
-		}
-	}
-
-	.rp-bulk-actions-btn {
-		border-radius: 0;
-		&:first-child {
-			border-top-left-radius: 3px;
-			border-bottom-left-radius: 3px;
-		}
-		&:last-child {
-			border-top-right-radius: 3px;
-			border-bottom-right-radius: 3px;
-			margin-left: 1px;
-		}
-	}
-
-	.rp-new-comment {
-		padding: 5px;
-	}
-
-	.rp-comment-input {
-		width: 100%;
-		font-size: @rp-base-font-size;
-		padding: 2px 5px;
-		border-radius: 3px;
-		border: solid 1px @rp-border-grey;
-		resize: vertical;
-		color: @rp-type-darkgrey;
-		background-color: #FFF;
-		margin-top: 3px;
-		overflow-x: hidden;
-		min-height: 3em;
-		max-height: 400px;
-	}
+  .rp-state-current-file & {
+    position: absolute;
+    width: @review-panel-width;
+  }
+  .rp-state-current-file-mini & {
+    display: none;
+    left: @review-off-width + @rp-entry-arrow-width;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -(@review-off-width + @rp-entry-arrow-width);
+      right: -(@review-off-width + @rp-entry-arrow-width);
+      bottom: -(@review-off-width + @rp-entry-arrow-width);
+      left: -(2 * @rp-entry-arrow-width + 2);
+      z-index: -1;
+    }
+    &::after {
+      .triangle(
+        left,
+        @rp-entry-arrow-width,
+        @rp-entry-arrow-width * 1.5,
+        inherit
+      );
+      top: (@review-off-width / 2) - @rp-entry-arrow-width;
+      left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
+      content: '';
+    }
+  }
+  .rp-state-current-file-mini.rp-layout-left & {
+    left: auto;
+    right: @review-off-width + @rp-entry-arrow-width;
+    border-left-width: 0;
+    border-right-width: @rp-entry-ribbon-width;
+    border-right-style: solid;
+
+    &::before {
+      left: -(@review-off-width + @rp-entry-arrow-width);
+      right: -(2 * @rp-entry-arrow-width + 2);
+    }
+    &::after {
+      .triangle(
+        right,
+        @rp-entry-arrow-width,
+        @rp-entry-arrow-width * 1.5,
+        inherit
+      );
+      right: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
+      left: auto;
+    }
+  }
+  .rp-state-current-file-expanded & {
+    visibility: hidden;
+    left: 5px;
+    right: 5px;
+    width: auto;
+
+    &-focused {
+      left: -2px;
+      right: 12px;
+      z-index: 1;
+    }
+
+    &-add-comment {
+      right: auto;
+
+      &.rp-entry-adding-comment {
+        right: 5px;
+      }
+    }
+    &-bulk-actions {
+      right: auto;
+    }
+  }
+  .rp-state-overview & {
+    border-radius: 0;
+    border-bottom: solid 1px @rp-border-grey;
+    cursor: pointer;
+  }
+  .resolved-comments-dropdown & {
+    position: static;
+    margin-bottom: 5px;
+  }
+
+  border-left: solid @rp-entry-ribbon-width transparent;
+  border-radius: 3px;
+  background-color: #fff;
+  transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
+  .no-animate & {
+    transition: none;
+  }
+
+  &-insert,
+  &-aggregate {
+    border-color: @rp-green;
+  }
+
+  &-delete {
+    border-color: @rp-red;
+  }
+
+  &-comment {
+    border-color: @rp-yellow;
+  }
+
+  &-comment-resolving {
+    top: 4px;
+    left: 6px;
+    opacity: 0;
+    z-index: 3;
+    transform: scale(0.1);
+    transform-origin: 0 0;
+    transition: top 0.35s ease-out, left 0.35s ease-out,
+      transform 0.35s ease-out, opacity 0.35s ease-out 0.2s;
+  }
+
+  &-comment-resolved {
+    border-color: @rp-grey;
+    background-color: #efefef;
+  }
+
+  &-add-comment {
+    background-color: transparent;
+    right: auto;
+    border-left-width: 0;
+
+    &.rp-entry-adding-comment {
+      background-color: #fff;
+      right: 5px;
+      border-left-width: 3px;
+      border-left-color: @rp-yellow;
+    }
+  }
+
+  &-bulk-actions {
+    background-color: transparent;
+    right: auto;
+    border-left-width: 0;
+  }
+}
+.rp-entry-body {
+  display: flex;
+  align-items: center;
+  padding: 4px 5px;
+}
+.rp-entry-action-icon {
+  font-size: @rp-icon-large-size;
+  padding: 0 3px;
+  line-height: 0;
+
+  .rp-state-overview & {
+    display: none;
+  }
+}
+
+.rp-entry-details {
+  line-height: 1.4;
+  margin-left: 5px;
+  // We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0).
+  // This is needed to ensure that IE makes the element fill the available space.
+  flex: 1 0 1px;
+  overflow-x: auto;
+
+  .rp-state-overview & {
+    margin-left: 0;
+  }
+}
+
+.rp-entry-metadata {
+  font-size: @rp-small-font-size;
+}
+.rp-entry-user {
+  font-weight: @rp-semibold-weight;
+  font-style: normal;
+}
+.rp-comment-actions {
+  a {
+    color: @rp-type-blue;
+  }
+}
+
+.rp-content-highlight {
+  color: @rp-type-darkgrey;
+  font-weight: @rp-semibold-weight;
+  text-decoration: none;
+
+  del& {
+    text-decoration: line-through;
+  }
+}
+
+.rp-entry-actions {
+  display: flex;
+
+  .rp-state-overview .rp-entry-list & {
+    display: none;
+  }
+}
+.rp-entry-button {
+  .rp-button();
+  flex: 1 1 50%;
+  border-right: solid 1px #fff;
+  padding: 2px 0;
+
+  &:last-child {
+    border-bottom-right-radius: 3px;
+    border-right-width: 0;
+  }
+
+  .rp-state-current-file-mini.rp-layout-left & {
+    &:first-child {
+      border-bottom-left-radius: 3px;
+    }
+    &:last-child {
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+.rp-comment {
+  margin: 2px 5px;
+  padding-bottom: 3px;
+  line-height: 1.4;
+  border-bottom: solid 1px @rp-border-grey;
+
+  &:last-child {
+    margin-bottom: 2px;
+    border-bottom-width: 0;
+  }
+
+  .rp-state-overview .rp-entry-list & {
+    margin: 4px 5px;
+
+    &:first-child {
+      margin-top: 0;
+      padding-top: 4px;
+    }
+  }
+}
+.rp-comment-content {
+  margin: 0;
+  color: @rp-type-darkgrey;
+  overflow-x: auto; // Long words, like links can overflow without this.
+}
+
+.rp-comment-resolver {
+  color: @rp-type-blue;
+}
+.rp-comment-resolver-content {
+  font-style: italic;
+  margin: 0;
+}
+
+.rp-comment-reply {
+  padding: 0 5px;
+}
+
+.rp-add-comment-btn,
+.rp-bulk-actions-btn {
+  .rp-button();
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 3px;
+
+  .rp-in-editor-widgets & {
+    display: block;
+    white-space: nowrap;
+    border-radius: 0;
+
+    &:last-child {
+      border-bottom-left-radius: 3px;
+    }
+  }
+}
+
+.rp-bulk-actions-btn {
+  border-radius: 0;
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  &:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    margin-left: 1px;
+  }
+}
+
+.rp-new-comment {
+  padding: 5px;
+}
+
+.rp-comment-input {
+  width: 100%;
+  font-size: @rp-base-font-size;
+  padding: 2px 5px;
+  border-radius: 3px;
+  border: solid 1px @rp-border-grey;
+  resize: vertical;
+  color: @rp-type-darkgrey;
+  background-color: #fff;
+  margin-top: 3px;
+  overflow-x: hidden;
+  min-height: 3em;
+  max-height: 400px;
+}
 
 .rp-icon-delete {
-	display: inline-block;
-	line-height: 1;
-	font-style: normal;
-	font-size: 0.8em;
-	text-decoration: line-through;
-	font-weight: @rp-semibold-weight;
-	&::before {
-		content: 'Ab';
-	}
+  display: inline-block;
+  line-height: 1;
+  font-style: normal;
+  font-size: 0.8em;
+  text-decoration: line-through;
+  font-weight: @rp-semibold-weight;
+  &::before {
+    content: 'Ab';
+  }
 }
 
 .rp-resolved-comment {
-	border-left: solid @rp-entry-ribbon-width @rp-yellow;
-	border-radius: 3px;
-	background-color: #FFF;
-	margin-bottom: 5px;
-}
-	.rp-resolved-comment-context {
-		background-color: lighten(@rp-yellow, 35%);
-		padding: 4px 5px;
-	}
-		.rp-resolved-comment-context-file {
-			font-weight: @rp-semibold-weight;
-		}
-
-		.rp-resolved-comment-context-quote {
-			color: #000;
-			font-family: @font-family-monospace;
-			margin: 0;
-		}
+  border-left: solid @rp-entry-ribbon-width @rp-yellow;
+  border-radius: 3px;
+  background-color: #fff;
+  margin-bottom: 5px;
+}
+.rp-resolved-comment-context {
+  background-color: lighten(@rp-yellow, 35%);
+  padding: 4px 5px;
+}
+.rp-resolved-comment-context-file {
+  font-weight: @rp-semibold-weight;
+}
+
+.rp-resolved-comment-context-quote {
+  color: #000;
+  font-family: @font-family-monospace;
+  margin: 0;
+}
 
 .rp-entry-callout {
-	transition: top @rp-entry-animation-speed, height @rp-entry-animation-speed;
-	.rp-state-current-file & {
-		position: absolute;
-		border-top: 1px solid grey;
-		border-right: 1px dashed grey;
-		&::after {
-			content: "";
-			position: absolute;
-			top: -1px;
-			left: 3px;
-			bottom: 0;
-			border-bottom: 1px solid grey;
-		}
-	}
-	.rp-state-current-file-expanded & {
-		width: 3px;
-		&::after {
-			width: 3px;
-		}
-	}
-	.rp-state-current-file-mini & {
-		width: 1px;
-		&::after {
-			width: 1px;
-		}
-	}
-	
-	.rp-state-overview & {
-		display: none;
-	}
-	
-	.rp-state-current-file &-inverted {
-		border-top: none;
-		border-bottom: 1px solid grey;
-		&::after {
-			top: 0px;
-			bottom: -1px;
-			border-top: 1px solid grey;
-			border-bottom: none;
-		}
-	}
-	
-	.rp-state-current-file &-insert {
-		border-color: @rp-green;
-		&::after {
-			border-color: @rp-green;
-		}
-	}
-	
-	.rp-state-current-file &-delete {
-		border-color: @rp-red;
-		&::after {
-			border-color: @rp-red;
-		}
-	}
-	
-	.rp-state-current-file &-comment {
-		border-color: @rp-yellow;
-		&::after {
-			border-color: @rp-yellow;
-		}
-	}
-
-	.rp-size-mini &-add-comment {
-		display: none;
-	}
+  transition: top @rp-entry-animation-speed, height @rp-entry-animation-speed;
+  .rp-state-current-file & {
+    position: absolute;
+    border-top: 1px solid grey;
+    border-right: 1px dashed grey;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: 3px;
+      bottom: 0;
+      border-bottom: 1px solid grey;
+    }
+  }
+  .rp-state-current-file-expanded & {
+    width: 3px;
+    &::after {
+      width: 3px;
+    }
+  }
+  .rp-state-current-file-mini & {
+    width: 1px;
+    &::after {
+      width: 1px;
+    }
+  }
+
+  .rp-state-overview & {
+    display: none;
+  }
+
+  .rp-state-current-file &-inverted {
+    border-top: none;
+    border-bottom: 1px solid grey;
+    &::after {
+      top: 0px;
+      bottom: -1px;
+      border-top: 1px solid grey;
+      border-bottom: none;
+    }
+  }
+
+  .rp-state-current-file &-insert {
+    border-color: @rp-green;
+    &::after {
+      border-color: @rp-green;
+    }
+  }
+
+  .rp-state-current-file &-delete {
+    border-color: @rp-red;
+    &::after {
+      border-color: @rp-red;
+    }
+  }
+
+  .rp-state-current-file &-comment {
+    border-color: @rp-yellow;
+    &::after {
+      border-color: @rp-yellow;
+    }
+  }
+
+  .rp-size-mini &-add-comment {
+    display: none;
+  }
 }
 
 .rp-overview-file-header {
-	padding: 2px 5px;
-	border-top: solid 1px @rp-border-grey;
-	border-bottom: solid 1px @rp-border-grey;
-	background-color: @rp-bg-dim-blue;
-	margin-top: 10px;
-	font-weight: @rp-semibold-weight;
-	text-align: center;
-	cursor: pointer;
-}
-
-	.rp-overview-file-num-entries {
-		font-weight: normal;
-		font-size: 0.9em;
-	}
-	.rp-overview-file-header-collapse {
-		.rp-collapse-arrow;
-		float: left;
-	}
-	.rp-overview-file-entries {
-		overflow: hidden;
-	}
+  padding: 2px 5px;
+  border-top: solid 1px @rp-border-grey;
+  border-bottom: solid 1px @rp-border-grey;
+  background-color: @rp-bg-dim-blue;
+  margin-top: 10px;
+  font-weight: @rp-semibold-weight;
+  text-align: center;
+  cursor: pointer;
+}
+
+.rp-overview-file-num-entries {
+  font-weight: normal;
+  font-size: 0.9em;
+}
+.rp-overview-file-header-collapse {
+  .rp-collapse-arrow;
+  float: left;
+}
+.rp-overview-file-entries {
+  overflow: hidden;
+}
 
 .rp-comment-wrapper {
-	transition: .35s opacity ease-out .2s;
+  transition: 0.35s opacity ease-out 0.2s;
 
-	&-resolving {
-		opacity: 0;
-	}
+  &-resolving {
+    opacity: 0;
+  }
 }
 
 .rp-loading,
 .rp-empty {
-	text-align: center;
-	padding: 5px;
+  text-align: center;
+  padding: 5px;
 }
 
 .rp-nav {
-	display: none;
-	flex-shrink: 0;
-	.rp-size-expanded & {
-		display: flex;
-	}
-
-	.rp-unsupported & {
-		display: none;
-	}
-
-	.rp-state-current-file & {
-		position: absolute;
-		bottom: 0;
-	}
-	width: 100%;
-	font-size: @rp-icon-large-size;
-	text-align: center;
-	background-color: @rp-bg-dim-blue;
-	border-top: solid 1px @rp-border-grey;
-	z-index: 2;
-}
-	.rp-nav-item {
-		display: block;
-		color: lighten(@rp-type-blue, 25%);
-		flex: 0 0 50%;
-		border-top: solid 3px transparent;
-		padding-bottom: 2px;
-
-		&:hover,
-		&:focus {
-			text-decoration: none;
-			color: @rp-type-blue;
-		}
-
-		&-active {
-			color: @rp-type-blue;
-			border-top: solid 3px @rp-highlight-blue;
-		}
-	}
-		.rp-nav-label {
-			display: block;
-			font-size: @rp-base-font-size;
-		}
+  display: none;
+  flex-shrink: 0;
+  .rp-size-expanded & {
+    display: flex;
+  }
+
+  .rp-unsupported & {
+    display: none;
+  }
+
+  .rp-state-current-file & {
+    position: absolute;
+    bottom: 0;
+  }
+  width: 100%;
+  font-size: @rp-icon-large-size;
+  text-align: center;
+  background-color: @rp-bg-dim-blue;
+  border-top: solid 1px @rp-border-grey;
+  z-index: 2;
+}
+.rp-nav-item {
+  display: block;
+  color: lighten(@rp-type-blue, 25%);
+  flex: 0 0 50%;
+  border-top: solid 3px transparent;
+  padding-bottom: 2px;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @rp-type-blue;
+  }
+
+  &-active {
+    color: @rp-type-blue;
+    border-top: solid 3px @rp-highlight-blue;
+  }
+}
+.rp-nav-label {
+  display: block;
+  font-size: @rp-base-font-size;
+}
 
 #editor {
-	.rp-size-mini & {
-		right: @review-off-width;
-		.ace-editor-body {
-			overflow: visible;
-			.ace_scrollbar-v {
-				right: -@review-off-width;
-			}
-		}
-	}
-
-	.rp-size-expanded & {
-		right: @review-panel-width;
-		left: 0px;
-		width: auto;
-	}
-	
-	.rp-state-current-file-expanded & {
-		.ace-editor-body {
-			overflow: visible;
-			.ace_scrollbar-v {
-				right: -@review-panel-width;
-			}
-		}
-	}
+  .rp-size-mini & {
+    right: @review-off-width;
+    .ace-editor-body {
+      overflow: visible;
+      .ace_scrollbar-v {
+        right: -@review-off-width;
+      }
+    }
+  }
+
+  .rp-size-expanded & {
+    right: @review-panel-width;
+    left: 0px;
+    width: auto;
+  }
+
+  .rp-state-current-file-expanded & {
+    .ace-editor-body {
+      overflow: visible;
+      .ace_scrollbar-v {
+        right: -@review-panel-width;
+      }
+    }
+  }
 }
 
 #editor-rich-text {
-	.rp-size-expanded & {
-		right: @review-panel-width;
-	}
+  .rp-size-expanded & {
+    right: @review-panel-width;
+  }
 }
 
 .rp-toggle {
-	display: inline-block;
-	vertical-align: middle;
-	padding-left: 5px;
-}
-	.rp-toggle-hidden-input {
-		display: none;
-
-		+ .rp-toggle-btn {
-			display: block;
-			width: 3.5em;
-			height: 1.75em;
-			position: relative;
-			outline: 0;
-			margin: 0;
-			font-weight: normal;
-			cursor: pointer;
-			user-select: none;
-			padding: 1px;
-			background-color: @rp-highlight-blue;
-			border: 1px solid #FFF;
-			border-radius: .875em;
-			transition: background .15s ease, border-color 0.15s ease;
-
-			&::before {
-				content: '';
-				display: block;
-				width: 50%;
-				height: 100%;
-				position: relative;
-				left: 0;
-				background-color: #FFF;
-				border-radius: .875em;
-				transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
-			}
-		}
-
-		&:checked + .rp-toggle-btn {
-			background-color: @red;
-			border-color: #FFF;
-
-			&::before {
-				left: 50%;
-				background-color: #FFF;
-			}
-		}
-
-		&:disabled + .rp-toggle-btn {
-			cursor: default;
-			opacity: .35;
-		}
-	}
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+.rp-toggle-hidden-input {
+  display: none;
+
+  + .rp-toggle-btn {
+    display: block;
+    width: 3.5em;
+    height: 1.75em;
+    position: relative;
+    outline: 0;
+    margin: 0;
+    font-weight: normal;
+    cursor: pointer;
+    user-select: none;
+    padding: 1px;
+    background-color: @rp-highlight-blue;
+    border: 1px solid #fff;
+    border-radius: 0.875em;
+    transition: background 0.15s ease, border-color 0.15s ease;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 50%;
+      height: 100%;
+      position: relative;
+      left: 0;
+      background-color: #fff;
+      border-radius: 0.875em;
+      transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
+    }
+  }
+
+  &:checked + .rp-toggle-btn {
+    background-color: @red;
+    border-color: #fff;
+
+    &::before {
+      left: 50%;
+      background-color: #fff;
+    }
+  }
+
+  &:disabled + .rp-toggle-btn {
+    cursor: default;
+    opacity: 0.35;
+  }
+}
 
 .rp-unsupported-msg-wrapper {
-	display: none;
-	.rp-size-expanded.rp-unsupported & {
-		display: block;
-	}
-
-	height: 100%;
-
-	.rp-unsupported-msg {
-		display: flex;
-		width: @review-panel-width - 40px;
-		height: 100%;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		margin: 0 auto;
-		text-align: center;
-
-		.rp-unsupported-msg-title {
-			font-size: 1.3em;
-			margin-top: 13px;
-		}
-	}
+  display: none;
+  .rp-size-expanded.rp-unsupported & {
+    display: block;
+  }
+
+  height: 100%;
+
+  .rp-unsupported-msg {
+    display: flex;
+    width: @review-panel-width - 40px;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+
+    .rp-unsupported-msg-title {
+      font-size: 1.3em;
+      margin-top: 13px;
+    }
+  }
 }
 
 .ace-editor-wrapper {
-	.track-changes-marker-callout {
-		border-radius: 0;
-		position: absolute;
-		.rp-state-overview &, .rp-loading-threads & {
-			display: none;
-		}
-	}
-	.track-changes-added-marker-callout {
-		border-bottom: 1px dashed @rp-green;
-		z-index: 1;
-	}
-	.track-changes-comment-marker-callout {
-		border-bottom: 1px dashed @rp-yellow;
-	}
-	.track-changes-deleted-marker-callout {
-		border-bottom: 1px dashed @rp-red;
-	}
-	
-	.track-changes-marker {
-		border-radius: 0;
-		position: absolute;
-		.rp-loading-threads & {
-			display: none;
-		}
-		z-index: 6 // Appear above text selection
-	}
-
-	.track-changes-comment-marker {
-		background-color: @rp-yellow;
-		opacity: 0.3;
-	}
-	.track-changes-added-marker {
-		background-color: @rp-green;
-		opacity: 0.3;
-	}
-	.track-changes-deleted-marker {
-		border-left: 2px dotted @rp-red;
-		margin-left: -1px;
-	}
-
-	.ace_dark {
-		.track-changes-comment-marker {
-			background-color: @rp-yellow-on-dark
-		}
-		.track-changes-added-marker {
-			background-color: @rp-green-on-dark;
-		}
-	}
+  .track-changes-marker-callout {
+    border-radius: 0;
+    position: absolute;
+    .rp-state-overview &,
+    .rp-loading-threads & {
+      display: none;
+    }
+  }
+  .track-changes-added-marker-callout {
+    border-bottom: 1px dashed @rp-green;
+    z-index: 1;
+  }
+  .track-changes-comment-marker-callout {
+    border-bottom: 1px dashed @rp-yellow;
+  }
+  .track-changes-deleted-marker-callout {
+    border-bottom: 1px dashed @rp-red;
+  }
+
+  .track-changes-marker {
+    border-radius: 0;
+    position: absolute;
+    .rp-loading-threads & {
+      display: none;
+    }
+    z-index: 6; // Appear above text selection
+  }
+
+  .track-changes-comment-marker {
+    background-color: @rp-yellow;
+    opacity: 0.3;
+  }
+  .track-changes-added-marker {
+    background-color: @rp-green;
+    opacity: 0.3;
+  }
+  .track-changes-deleted-marker {
+    border-left: 2px dotted @rp-red;
+    margin-left: -1px;
+  }
+
+  .ace_dark {
+    .track-changes-comment-marker {
+      background-color: @rp-yellow-on-dark;
+    }
+    .track-changes-added-marker {
+      background-color: @rp-green-on-dark;
+    }
+  }
 }
 
 .cm-editor-wrapper {
-	@rp-yellow-for-cm: fade(@rp-yellow, 40%); // Get the RGBA colour with transparency
-	@rp-green-for-cm: fade(@rp-green, 40%); // Get the RGBA colour with transparency
-
-	.track-changes-marker {
-		border-radius: 0;
-	}
-
-	.track-changes-added-marker {
-		// Uses rgba so not to affect the opacity of the text - doesn't layer like ace
-		background-color: @rp-green-for-cm;
-		color: black;
-	}
-
-	.track-changes-deleted-marker {
-		border-left: 2px dotted #c5060b;
-		// Commented out styles for callout to be reimplemented later
-		// border-bottom: 1px dashed #c5060b;
-		// width: 100%;
-	}
-
-	.track-changes-comment-marker {
-		// Uses rgba so not to affect the opacity of the text - doesn't layer like ace
-		background-color: @rp-yellow-for-cm;
-		color: black;
-	}
-
-	.track-changes-added-marker.track-changes-comment-marker {
-		background-color: mix(@rp-yellow-for-cm, @rp-green-for-cm);
-	}
+  @rp-yellow-for-cm: fade(
+    @rp-yellow,
+    40%
+  ); // Get the RGBA colour with transparency
+  @rp-green-for-cm: fade(
+    @rp-green,
+    40%
+  ); // Get the RGBA colour with transparency
+
+  .track-changes-marker {
+    border-radius: 0;
+  }
+
+  .track-changes-added-marker {
+    // Uses rgba so not to affect the opacity of the text - doesn't layer like ace
+    background-color: @rp-green-for-cm;
+    color: black;
+  }
+
+  .track-changes-deleted-marker {
+    border-left: 2px dotted #c5060b;
+    // Commented out styles for callout to be reimplemented later
+    // border-bottom: 1px dashed #c5060b;
+    // width: 100%;
+  }
+
+  .track-changes-comment-marker {
+    // Uses rgba so not to affect the opacity of the text - doesn't layer like ace
+    background-color: @rp-yellow-for-cm;
+    color: black;
+  }
+
+  .track-changes-added-marker.track-changes-comment-marker {
+    background-color: mix(@rp-yellow-for-cm, @rp-green-for-cm);
+  }
 }
 
 .review-icon when (@is-overleaf = false) {
-	display: inline-block;
-	background: url('/img/review-icon-sprite.png') top/30px no-repeat;
-	width: 30px;
-
-	&::before {
-		content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
-	}
-
-	.toolbar .btn-full-height:hover & {
-		background-position-y: -30px;
-	}
-
-	.toolbar .btn-full-height.active &,
-	.toolbar .btn-full-height:active & {
-		background-position-y: -60px;
-	}
-	
-	@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-		background-image: url('/img/review-icon-sprite@2x.png');
-	}
+  display: inline-block;
+  background: url('/img/review-icon-sprite.png') top/30px no-repeat;
+  width: 30px;
+
+  &::before {
+    content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
+  }
+
+  .toolbar .btn-full-height:hover & {
+    background-position-y: -30px;
+  }
+
+  .toolbar .btn-full-height.active &,
+  .toolbar .btn-full-height:active & {
+    background-position-y: -60px;
+  }
+
+  @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+    background-image: url('/img/review-icon-sprite@2x.png');
+  }
 }
 
 .review-icon when (@is-overleaf = true) {
-	display: inline-block;
-	background: url('/img/review-icon-sprite-ol.png') top/30px no-repeat;
-	width: 30px;
-	background-position-y: -30px;
-
-	&::before {
-		content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
-	}
-	
-	@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-		background-image: url('/img/review-icon-sprite-ol@2x.png');
-	}
+  display: inline-block;
+  background: url('/img/review-icon-sprite-ol.png') top/30px no-repeat;
+  width: 30px;
+  background-position-y: -30px;
+
+  &::before {
+    content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
+  }
+
+  @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+    background-image: url('/img/review-icon-sprite-ol@2x.png');
+  }
 }
 
 .review-icon when (@is-overleaf-light = true) {
-	background-position-y: 0;
-	.toolbar .btn-full-height.active &,
-	.toolbar .btn-full-height:active & {
-		background-position-y: -30px;
-	}
+  background-position-y: 0;
+  .toolbar .btn-full-height.active &,
+  .toolbar .btn-full-height:active & {
+    background-position-y: -30px;
+  }
 }
 
 .resolved-comments-toggle {
-	font-size: 14px;
-	color: lighten(@rp-type-blue, 25%);
-	border: solid 1px @rp-border-grey;
-	border-radius: 3px;
-	padding: 0 4px;
-	display: block;
-	height: 22px;
-	width: 22px;
-	line-height: 1.4;
-
-	&:hover,
-	&:focus {
-		text-decoration: none;
-		color: @rp-type-blue;
-	}
+  font-size: 14px;
+  color: lighten(@rp-type-blue, 25%);
+  border: solid 1px @rp-border-grey;
+  border-radius: 3px;
+  padding: 0 4px;
+  display: block;
+  height: 22px;
+  width: 22px;
+  line-height: 1.4;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @rp-type-blue;
+  }
 }
 
 .resolved-comments-backdrop {
-	display: none;
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-
-	&-visible {
-		display: block;
-	}
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &-visible {
+    display: block;
+  }
 }
 
 .resolved-comments-dropdown {
-	display: none;
-	position: absolute;
-	width: 300px;
-	left: -150px;
-	max-height: ~"calc(100vh - 100px)";
-	margin-top: @rp-entry-arrow-width * 1.5;
-	margin-left: 1em;
-	background-color: @rp-bg-blue;
-	text-align: left;
-	align-items: stretch;
-	justify-content: center;
-	border-radius: 3px;
-	box-shadow: 0 0 20px 10px rgba(0, 0, 0, .3);
-	z-index: 1;
-
-	&::before {
-		content: '';
-		.triangle(top, @rp-entry-arrow-width * 3, @rp-entry-arrow-width * 1.5, @rp-bg-blue);
-		top: -@rp-entry-ribbon-width * 2;
-		left: 50%;
-		margin-left: -@rp-entry-arrow-width * .75;
-	}
-
-	&-open {
-		display: flex;
-	}
-}
-	.resolved-comments-scroller {
-		flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
-		width: 100%; // We need to set the width explicitly, as flex-basis won't work.
-		max-height: ~"calc(100vh - 100px)"; // We also need to explicitly set the max-height, IE won't compute the flex-determined height.
-		padding: 5px;
-		overflow-y: auto;
-	}
+  display: none;
+  position: absolute;
+  width: 300px;
+  left: -150px;
+  max-height: ~'calc(100vh - 100px)';
+  margin-top: @rp-entry-arrow-width * 1.5;
+  margin-left: 1em;
+  background-color: @rp-bg-blue;
+  text-align: left;
+  align-items: stretch;
+  justify-content: center;
+  border-radius: 3px;
+  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+
+  &::before {
+    content: '';
+    .triangle(
+      top,
+      @rp-entry-arrow-width * 3,
+      @rp-entry-arrow-width * 1.5,
+      @rp-bg-blue
+    );
+    top: -@rp-entry-ribbon-width * 2;
+    left: 50%;
+    margin-left: -@rp-entry-arrow-width * 0.75;
+  }
+
+  &-open {
+    display: flex;
+  }
+}
+.resolved-comments-scroller {
+  flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
+  width: 100%; // We need to set the width explicitly, as flex-basis won't work.
+  max-height: ~'calc(100vh - 100px)'; // We also need to explicitly set the max-height, IE won't compute the flex-determined height.
+  padding: 5px;
+  overflow-y: auto;
+}
 
 .rp-collapse-toggle {
-	color: @rp-type-blue;
-	font-weight: @rp-semibold-weight;
-
-	&:hover,
-	&:focus {
-		color: darken(@rp-type-blue, 5%);
-		text-decoration: none;
-	}
+  color: @rp-type-blue;
+  font-weight: @rp-semibold-weight;
+
+  &:hover,
+  &:focus {
+    color: darken(@rp-type-blue, 5%);
+    text-decoration: none;
+  }
 }
 
 .rp-in-editor-widgets {
-	position: absolute;
-	top: 0;
-	right: 0;
-	font-size: 11px;
-	z-index: 2;
-	
-	.rp-size-mini & {
-		right: @review-off-width;
-	}
-	.rp-size-expanded &,
-	.rp-unsupported & {
-		display: none;
-	}
-}
-	.rp-track-changes-indicator {
-		display: block;
-		padding: 5px 10px;
-		background-color: rgba(240, 240, 240, 0.9);
-		color: @rp-type-blue;
-		text-align: center;
-		border-bottom-left-radius: 3px;
-		white-space: nowrap;
-
-		&.rp-track-changes-indicator-on-dark {
-			background-color: rgba(88, 88, 88, .8);
-			color: #FFF;
-			
-			&:hover,
-			&:focus {
-				background-color: rgba(88, 88, 88, 1);
-				color: #FFF;
-			}
-		}
-
-		&:hover,
-		&:focus {
-			outline: 0;
-			text-decoration: none;
-			background-color: rgba(240, 240, 240, 1);
-			color: @rp-type-blue;
-		}
-	}
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 11px;
+  z-index: 2;
+
+  .rp-size-mini & {
+    right: @review-off-width;
+  }
+  .rp-size-expanded &,
+  .rp-unsupported & {
+    display: none;
+  }
+}
+.rp-track-changes-indicator {
+  display: block;
+  padding: 5px 10px;
+  background-color: rgba(240, 240, 240, 0.9);
+  color: @rp-type-blue;
+  text-align: center;
+  border-bottom-left-radius: 3px;
+  white-space: nowrap;
+
+  &.rp-track-changes-indicator-on-dark {
+    background-color: rgba(88, 88, 88, 0.8);
+    color: #fff;
+
+    &:hover,
+    &:focus {
+      background-color: rgba(88, 88, 88, 1);
+      color: #fff;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+    background-color: rgba(240, 240, 240, 1);
+    color: @rp-type-blue;
+  }
+}
 
 .review-panel-toggler {
-	display: none;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 10px;
-	opacity: 0.5;
-	color: @rp-highlight-blue;
-	z-index: 1;
-	background-color: transparent;
-	transition: background 0.1s;
-
-	.rp-size-mini &,
-	.rp-size-expanded & {
-		display: block;
-	}
-
-	.rp-unsupported & {
-		display: none;
-	}
-
-	.rp-size-expanded & {
-		&::after {
-			content: "\f105";
-		}
-	}
-
-	&:hover,
-	&:focus {
-		color: @rp-highlight-blue;
-		background-color: #FFF;
-	}
-
-	&::after {
-		content: "\f104";
-		font-family: FontAwesome;
-		line-height: 1;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		font-size: 16px;
-		display: block;
-		position: absolute;
-		top: 50%;
-		width: 100%;
-		text-align: center;
-		margin-top: -0.5em;
-	}
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  opacity: 0.5;
+  color: @rp-highlight-blue;
+  z-index: 1;
+  background-color: transparent;
+  transition: background 0.1s;
+
+  .rp-size-mini &,
+  .rp-size-expanded & {
+    display: block;
+  }
+
+  .rp-unsupported & {
+    display: none;
+  }
+
+  .rp-size-expanded & {
+    &::after {
+      content: '\f105';
+    }
+  }
+
+  &:hover,
+  &:focus {
+    color: @rp-highlight-blue;
+    background-color: #fff;
+  }
+
+  &::after {
+    content: '\f104';
+    font-family: FontAwesome;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 16px;
+    display: block;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    text-align: center;
+    margin-top: -0.5em;
+  }
 }
 // Helper class for elements which aren't treated as flex-items by IE10, e.g:
 // * inline items;
 // * unknown elements (elements which aren't standard DOM elements, such as custom element directives)
 .rp-flex-block {
-	display: block;
+  display: block;
 }

services/web/frontend/stylesheets/app/editor/rich-text.less

@@ -44,45 +44,45 @@
   // wl-indent-X is used to add extra left padding to nested itemize/enumerate
   // environments, so that the inner list appears more indented than the outer
   .wl-indent-0 {
-    padding-left: calc(~"2.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'2.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-1 {
-    padding-left: calc(~"3.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'3.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-2 {
-    padding-left: calc(~"4.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'4.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-3 {
-    padding-left: calc(~"5.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'5.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-4 {
-    padding-left: calc(~"6.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'6.5em + @{rt-line-padding}') !important;
   }
 
   // wl-indent-env-X is used to add extra left padding to empty nested itemize/
   // enumerate environments
   .wl-indent-env-0 {
-    padding-left: calc(~"4px + @{rt-line-padding}") !important;
+    padding-left: calc(~'4px + @{rt-line-padding}') !important;
   }
 
   .wl-indent-env-1 {
-    padding-left: calc(~"1.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'1.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-env-2 {
-    padding-left: calc(~"2.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'2.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-env-3 {
-    padding-left: calc(~"3.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'3.5em + @{rt-line-padding}') !important;
   }
 
   .wl-indent-env-4 {
-    padding-left: calc(~"4.5em + @{rt-line-padding}") !important;
+    padding-left: calc(~'4.5em + @{rt-line-padding}') !important;
   }
 
   .wl-enumerate-item-open {
@@ -105,7 +105,8 @@
 
   /****************************************************************************/
 
-  .wl-abstract-open, .wl-abstract-close {
+  .wl-abstract-open,
+  .wl-abstract-close {
     border-top: 1px solid #999;
     font-size: large;
     font-weight: bold;
@@ -121,7 +122,7 @@
   .wl-figure-wrap {
     padding: 10px 0;
     background-color: #f5f5f5;
-    box-shadow: 1.3px 2px 2px #DFDFDF;
+    box-shadow: 1.3px 2px 2px #dfdfdf;
     width: 96%;
     margin: 0 auto;
     text-align: center;
@@ -136,43 +137,55 @@
 
   /****************************************************************************/
 
-  .wl-chapter, .wl-chapter-open, .wl-chapter-close {
+  .wl-chapter,
+  .wl-chapter-open,
+  .wl-chapter-close {
     font-size: 2.2em;
     font-weight: bold;
   }
 
-  .wl-chapter-open, .wl-chapter-close {
+  .wl-chapter-open,
+  .wl-chapter-close {
     color: #999;
   }
 
   /****************************************************************************/
 
-  .wl-section, .wl-section-open, .wl-section-close {
+  .wl-section,
+  .wl-section-open,
+  .wl-section-close {
     font-size: 1.8em;
     font-weight: bold;
   }
 
-  .wl-section-open, .wl-section-close {
+  .wl-section-open,
+  .wl-section-close {
     color: #999;
   }
 
   /****************************************************************************/
-  .wl-subsection, .wl-subsection-open, .wl-subsection-close {
+  .wl-subsection,
+  .wl-subsection-open,
+  .wl-subsection-close {
     font-size: 1.5em;
     font-weight: bold;
   }
 
-  .wl-subsection-open, .wl-subsection-close {
+  .wl-subsection-open,
+  .wl-subsection-close {
     color: #999;
   }
 
   /****************************************************************************/
-  .wl-subsubsection, .wl-subsubsection-open, .wl-subsubsection-close {
+  .wl-subsubsection,
+  .wl-subsubsection-open,
+  .wl-subsubsection-close {
     font-size: 1.1em;
     font-weight: bold;
   }
 
-  .wl-subsubsection-open, .wl-subsubsection-close {
+  .wl-subsubsection-open,
+  .wl-subsubsection-close {
     color: #999;
   }
 
@@ -207,7 +220,7 @@
   }
 
   .wl-img-default {
-    width: 0.9em ;
+    width: 0.9em;
     padding: 0 1px 1px;
   }
 
@@ -239,4 +252,3 @@
     background-position: bottom;
   }
 }
-

services/web/frontend/stylesheets/app/editor/share.less

@@ -1,74 +1,77 @@
 .modal-body-share {
-	h3 {
-		border-bottom: 1px solid @gray-lighter;
-		padding-bottom: @line-height-computed / 4;
-		margin: 0;
-		font-size: 1rem;
-	}
+  h3 {
+    border-bottom: 1px solid @gray-lighter;
+    padding-bottom: @line-height-computed / 4;
+    margin: 0;
+    font-size: 1rem;
+  }
 
-	.project-member, .project-invite, .public-access-level {
-		padding: (@line-height-computed / 2) 0;
-		border-bottom: 1px solid @gray-lighter;
-		font-size: 14px;
-	}
+  .project-member,
+  .project-invite,
+  .public-access-level {
+    padding: (@line-height-computed / 2) 0;
+    border-bottom: 1px solid @gray-lighter;
+    font-size: 14px;
+  }
 
-	.public-access-level {
-		padding-top: 0;
-		font-size: 13px;
-		padding-bottom: @modal-inner-padding;
-		.access-token-display-area {
-			margin-top: @line-height-computed/4;
-			.access-token-wrapper {
-				padding-top: @line-height-computed/4;
-				.access-token {
-					margin-top: @line-height-computed/4;
-					background-color: @gray-lightest;
-					border: 1px solid @gray-lighter;
-					padding: 6px 12px 6px 12px
-				}
-			}
-		}
-	}
+  .public-access-level {
+    padding-top: 0;
+    font-size: 13px;
+    padding-bottom: @modal-inner-padding;
+    .access-token-display-area {
+      margin-top: @line-height-computed / 4;
+      .access-token-wrapper {
+        padding-top: @line-height-computed / 4;
+        .access-token {
+          margin-top: @line-height-computed / 4;
+          background-color: @gray-lightest;
+          border: 1px solid @gray-lighter;
+          padding: 6px 12px 6px 12px;
+        }
+      }
+    }
+  }
 
-	.public-access-level.public-access-level--notice {
-		background-color: @gray-lightest;
-		border-bottom: none;
-		margin-top: @margin-md;
-		padding-top: @margin-md;
-	}
+  .public-access-level.public-access-level--notice {
+    background-color: @gray-lightest;
+    border-bottom: none;
+    margin-top: @margin-md;
+    padding-top: @margin-md;
+  }
 
-	.project-member, .project-invite {
-		&:hover {
-			background-color: @gray-lightest;
-		}
-	}
+  .project-member,
+  .project-invite {
+    &:hover {
+      background-color: @gray-lightest;
+    }
+  }
 
-	.invite-controls {
-		.small {
-			padding: 2px;
-		}
-		padding: @line-height-computed / 2;
-		background-color: @gray-lightest;
-		margin-top: @line-height-computed / 2;
-		form {
-			.form-group {
-				margin-bottom: @line-height-computed / 2;
-				&:last-child {
-					margin-bottom: 0;
-				}
-			}
-			.privileges {
-				display: inline-block;
-				width: auto;
-				height: 30px;
-				font-size: 14px;
-			}
-		}
-	}
+  .invite-controls {
+    .small {
+      padding: 2px;
+    }
+    padding: @line-height-computed / 2;
+    background-color: @gray-lightest;
+    margin-top: @line-height-computed / 2;
+    form {
+      .form-group {
+        margin-bottom: @line-height-computed / 2;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      .privileges {
+        display: inline-block;
+        width: auto;
+        height: 30px;
+        font-size: 14px;
+      }
+    }
+  }
 }
 .modal-footer-share {
-	.modal-footer-left {
-		max-width: 70%;
-		text-align: left;
-	}
+  .modal-footer-left {
+    max-width: 70%;
+    text-align: left;
+  }
 }

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -1,207 +1,210 @@
 @toolbar-height: 40px;
 
 .toolbar {
-	display: flex;
-	align-items: center;
-	height: @toolbar-height;
-	border-bottom: @toolbar-border-bottom;
-
-	> a, .toolbar-right > a {
-		position: relative;
-		.label {
-			position: absolute;
-			top: 0;
-			right: 0;
-			padding: .15em .6em .2em;
-			font-size: 60%;
-			pointer-events: none; // Labels were capturing button/anchor clicks.
-		}
-	}
-
-	> a:focus {
-		outline: none;
-	}
-
-	> a:not(.btn),
-	.toolbar-left > a:not(.btn),
-	.toolbar-right > a:not(.btn) {
-		display: inline-block;
-		color: @toolbar-icon-btn-color;
-		padding: 4px 2px;
-		line-height: 1;
-		height: 24px;
-		border-radius: @border-radius-small;
-		&.toolbar-header-back-projects {
-			padding: 5px 10px 4px;
-			margin-bottom: 1px;
-		}
-
-		&:hover {
-			text-shadow: @toolbar-icon-btn-hover-shadow;
-			color: @toolbar-icon-btn-hover-color;
-			text-decoration: none;
-		}
-		&.active, &:active {
-			.label {
-				display: none;
-			}
-			color: white;
-			background-color: @link-color;
-			box-shadow: @toolbar-icon-btn-hover-boxshadow;
-			&:hover {
-				color: white;
-			}
-		}
-	}
-
-	&.toolbar-pdf > a:not(.btn) {
-		margin-right: 3px;
-	}
-
-	.btn-full-height {
-		border: none;
-		border-radius: 0;
-		border-right: 1px solid @toolbar-header-btn-border-color;
-		color: @toolbar-btn-color;
-		padding: 3px 10px 5px;
-		font-size: 20px;
-		max-height: 39px;
-		&:hover {
-			text-shadow: @toolbar-btn-hover-text-shadow;
-			background-color: @toolbar-btn-hover-bg-color;
-			color: @toolbar-btn-hover-color;
-		}
-		&.active, &:active {
-			color: @toolbar-btn-active-color;
-			background-color: @toolbar-btn-active-bg-color;
-			box-shadow: @toolbar-btn-active-shadow;
-		}
-		.label {
-			top: 4px;
-			right: 4px;
-		}
-
-		&.header-cobranding-logo-container {
-			height: @toolbar-height - 1;
-			padding: 8px 10px;
-			background-color: @toolbar-header-branded-btn-bg-color;
-		}
-	}
-	.btn-full-height-no-border {
-		border-right: 0;
-		border-left: 0;
-	}
-
-	.toolbar-left {
-		display: flex;
-		float: left;
-		text-align: center;
-		align-items: center;
-	}
-
-	.toolbar-right {
-		display: flex;
-		align-items: center;
-		flex-grow: 1;
-		justify-content: flex-end;
-		.btn-full-height {
-			border-right: 0;
-			border-left: 1px solid @toolbar-header-btn-border-color;
-		}
-	}
-
-	.toolbar-center {
-		text-align: center;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		// At small screen sizes, center relative to the left menu and right buttons
-		width: 100%;
-		display: flex;
-		justify-content: center;
-	}
-
-	&.toolbar-header {
-		background-color: @toolbar-header-bg-color;
-		box-shadow: @toolbar-header-shadow;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 1;
-	}
-
-	&.toolbar-small {
-		.toolbar-small-mixin;
-	}
-
-	&.toolbar-tall {
-		.toolbar-small-mixin;
-	}
-
-	&.toolbar-alt {
-		.toolbar-alt-mixin;
-	}
+  display: flex;
+  align-items: center;
+  height: @toolbar-height;
+  border-bottom: @toolbar-border-bottom;
+
+  > a,
+  .toolbar-right > a {
+    position: relative;
+    .label {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0.15em 0.6em 0.2em;
+      font-size: 60%;
+      pointer-events: none; // Labels were capturing button/anchor clicks.
+    }
+  }
+
+  > a:focus {
+    outline: none;
+  }
+
+  > a:not(.btn),
+  .toolbar-left > a:not(.btn),
+  .toolbar-right > a:not(.btn) {
+    display: inline-block;
+    color: @toolbar-icon-btn-color;
+    padding: 4px 2px;
+    line-height: 1;
+    height: 24px;
+    border-radius: @border-radius-small;
+    &.toolbar-header-back-projects {
+      padding: 5px 10px 4px;
+      margin-bottom: 1px;
+    }
+
+    &:hover {
+      text-shadow: @toolbar-icon-btn-hover-shadow;
+      color: @toolbar-icon-btn-hover-color;
+      text-decoration: none;
+    }
+    &.active,
+    &:active {
+      .label {
+        display: none;
+      }
+      color: white;
+      background-color: @link-color;
+      box-shadow: @toolbar-icon-btn-hover-boxshadow;
+      &:hover {
+        color: white;
+      }
+    }
+  }
+
+  &.toolbar-pdf > a:not(.btn) {
+    margin-right: 3px;
+  }
+
+  .btn-full-height {
+    border: none;
+    border-radius: 0;
+    border-right: 1px solid @toolbar-header-btn-border-color;
+    color: @toolbar-btn-color;
+    padding: 3px 10px 5px;
+    font-size: 20px;
+    max-height: 39px;
+    &:hover {
+      text-shadow: @toolbar-btn-hover-text-shadow;
+      background-color: @toolbar-btn-hover-bg-color;
+      color: @toolbar-btn-hover-color;
+    }
+    &.active,
+    &:active {
+      color: @toolbar-btn-active-color;
+      background-color: @toolbar-btn-active-bg-color;
+      box-shadow: @toolbar-btn-active-shadow;
+    }
+    .label {
+      top: 4px;
+      right: 4px;
+    }
+
+    &.header-cobranding-logo-container {
+      height: @toolbar-height - 1;
+      padding: 8px 10px;
+      background-color: @toolbar-header-branded-btn-bg-color;
+    }
+  }
+  .btn-full-height-no-border {
+    border-right: 0;
+    border-left: 0;
+  }
+
+  .toolbar-left {
+    display: flex;
+    float: left;
+    text-align: center;
+    align-items: center;
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: flex-end;
+    .btn-full-height {
+      border-right: 0;
+      border-left: 1px solid @toolbar-header-btn-border-color;
+    }
+  }
+
+  .toolbar-center {
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    // At small screen sizes, center relative to the left menu and right buttons
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  &.toolbar-header {
+    background-color: @toolbar-header-bg-color;
+    box-shadow: @toolbar-header-shadow;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  &.toolbar-small {
+    .toolbar-small-mixin;
+  }
+
+  &.toolbar-tall {
+    .toolbar-small-mixin;
+  }
+
+  &.toolbar-alt {
+    .toolbar-alt-mixin;
+  }
 }
 
-	.header-cobranding-logo {
-		display: block;
-		width: auto;
-		max-height: 100%;
-	}
+.header-cobranding-logo {
+  display: block;
+  width: auto;
+  max-height: 100%;
+}
 
 .toolbar-small-mixin() {
-	height: @toolbar-small-height;
+  height: @toolbar-small-height;
 }
 
 .toolbar-tall-mixin() {
-	height: @toolbar-tall-height;
-	padding-top: 10px;
+  height: @toolbar-tall-height;
+  padding-top: 10px;
 }
 .toolbar-alt-mixin() {
-	background-color: @toolbar-alt-bg-color;
+  background-color: @toolbar-alt-bg-color;
 }
 
 .toolbar-label {
-	display: none;
-	margin: 0 4px;
-	font-size: @toolbar-font-size;
-	font-weight: 600;
-	margin-bottom: 2px;
-	vertical-align: middle;
-	text-align: left;
-
-	@media (min-width: @screen-md-min) {
-		display: inline-block;
-	}
-
-	&.toolbar-label-multiline {
-		line-height: 1.1;
-	}
+  display: none;
+  margin: 0 4px;
+  font-size: @toolbar-font-size;
+  font-weight: 600;
+  margin-bottom: 2px;
+  vertical-align: middle;
+  text-align: left;
+
+  @media (min-width: @screen-md-min) {
+    display: inline-block;
+  }
+
+  &.toolbar-label-multiline {
+    line-height: 1.1;
+  }
 }
 
 .editor-dark {
-	.toolbar-alt {
-		background-color: darken(@editor-dark-background-color, 0%);
-	}
-	.toolbar {
-		border-color: @editor-dark-toolbar-border-color;
-		.btn-full-height {
-			border-color: @editor-dark-toolbar-border-color;
-			&:hover {
-				background-color: black;
-				color: lighten(@link-color, 10%);
-			}
-		}
-		&.toolbar-header {
-			box-shadow: none;
-		}
-		> a:not(.btn) {
-			color: @gray;
-			&:hover {
-				color: @gray-light;
-			}
-		}
-	}
+  .toolbar-alt {
+    background-color: darken(@editor-dark-background-color, 0%);
+  }
+  .toolbar {
+    border-color: @editor-dark-toolbar-border-color;
+    .btn-full-height {
+      border-color: @editor-dark-toolbar-border-color;
+      &:hover {
+        background-color: black;
+        color: lighten(@link-color, 10%);
+      }
+    }
+    &.toolbar-header {
+      box-shadow: none;
+    }
+    > a:not(.btn) {
+      color: @gray;
+      &:hover {
+        color: @gray-light;
+      }
+    }
+  }
 }
 
 /**************************************
@@ -209,145 +212,145 @@
 ***************************************/
 
 .toggle-wrapper {
-	min-width: 200px;
-	height: 24px;
+  min-width: 200px;
+  height: 24px;
 }
 
 .toggle-switch {
-	position: relative;
-	height: 100%;
-	width: 100%;
-	background-color: @toggle-switch-bg;
-	border-radius: @btn-border-radius-base;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: @toggle-switch-bg;
+  border-radius: @btn-border-radius-base;
 }
 
 .toggle-switch-label {
-	position: relative;
-	display: block;
-	font-weight: normal;
-	z-index: 2;
-	float: left;
-	width: 50%;
-	height: 100%;
-	line-height: 24px;
-	text-align: center;
-	margin-bottom: 0;
-	cursor: pointer;
-	user-select: none;
-	color: @text-color;
-	transition: color 0.12s ease-out;
+  position: relative;
+  display: block;
+  font-weight: normal;
+  z-index: 2;
+  float: left;
+  width: 50%;
+  height: 100%;
+  line-height: 24px;
+  text-align: center;
+  margin-bottom: 0;
+  cursor: pointer;
+  user-select: none;
+  color: @text-color;
+  transition: color 0.12s ease-out;
 }
 
 .toggle-switch-input {
-	position: absolute;
-	opacity: 0;
+  position: absolute;
+  opacity: 0;
 }
 
 .toggle-switch-input:checked + .toggle-switch-label {
-	color: #fff;
-	font-weight: bold;
+  color: #fff;
+  font-weight: bold;
 }
 
 .toggle-switch-selection {
-	display: block;
-	position: absolute;
-	z-index: 1;
-	top: 2px;
-	left: 2px;
-	right: 2px;
-	width: calc(~"50% - 2px");
-	height: calc(~"100% - 4px");
-	background: @toggle-switch-highlight-color;
-	border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
-	transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  width: calc(~'50% - 2px');
+  height: calc(~'100% - 4px');
+  background: @toggle-switch-highlight-color;
+  border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
+  transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
 }
 
 .toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
-	transform: translate(100%);
-	border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
+  transform: translate(100%);
+  border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
 }
 
 /**************************************
 	Formatting buttons
 ***************************************/
 .formatting-buttons {
-	width: 100%;
-	overflow: hidden;
+  width: 100%;
+  overflow: hidden;
 }
 
 .formatting-buttons-wrapper {
-	display: flex;
+  display: flex;
 }
 
 .formatting-btn {
-	color: @formatting-btn-color;
-	background-color: @formatting-btn-bg;
-	padding: 0;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-	border: none;
-	border-left: 1px solid @formatting-btn-border;
-	border-radius: 0;
-
-	&:hover {
-		color: @formatting-btn-color;
-	}
+  color: @formatting-btn-color;
+  background-color: @formatting-btn-bg;
+  padding: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  border: none;
+  border-left: 1px solid @formatting-btn-border;
+  border-radius: 0;
+
+  &:hover {
+    color: @formatting-btn-color;
+  }
 }
 
 .formatting-btn--icon {
-	min-width: 32px;
-	width: 32px;
+  min-width: 32px;
+  width: 32px;
 }
 
 .formatting-btn--icon:last-of-type {
-	border-right: 1px solid @formatting-btn-border;
+  border-right: 1px solid @formatting-btn-border;
 }
 
 .formatting-btn--more {
-	padding-left: 9px;
-	padding-right: 9px;
+  padding-left: 9px;
+  padding-right: 9px;
 
-	.caret {
-		margin-top: 1px;
-	}
+  .caret {
+    margin-top: 1px;
+  }
 }
 
 .formatting-icon {
-	font-style: normal;
-	line-height: 1.5;
+  font-style: normal;
+  line-height: 1.5;
 }
 
 .formatting-icon--small {
-	font-size: small;
-	line-height: 1.9;
+  font-size: small;
+  line-height: 1.9;
 }
 
 .formatting-icon--serif {
-	font-family: @font-family-serif;
+  font-family: @font-family-serif;
 }
 
 .formatting-more {
-	margin-left: auto;
+  margin-left: auto;
 }
 
 .formatting-menu {
-	min-width: auto;
-	max-width: 130px;
-	background-color: @formatting-menu-bg;
+  min-width: auto;
+  max-width: 130px;
+  background-color: @formatting-menu-bg;
 }
 
 .formatting-menu-item {
-	float: left;
+  float: left;
 }
 
 .formatting-menu-item > .formatting-btn {
-	border-right: none;
+  border-right: none;
 }
 
 // Disable border on left-most icon in menu
 .formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
-	border-left: none;
+  border-left: none;
 }

services/web/frontend/stylesheets/app/error-pages.less

@@ -1,110 +1,110 @@
 .full-height {
-	height: 100%;
-	padding: 0;
+  height: 100%;
+  padding: 0;
 }
 
 .error-container {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .error-container.full-height when (@is-overleaf = true) {
-	margin-top: -(@header-height + @content-margin-vertical) / 2;
+  margin-top: -(@header-height + @content-margin-vertical) / 2;
 }
 
-	.error-figure {
-		display: none;
-		flex: 0 0 50%;
-		padding: @line-height-computed * 2;
-		@media (min-width: @screen-sm-min) {
-			display: block;
-		}
-	}
+.error-figure {
+  display: none;
+  flex: 0 0 50%;
+  padding: @line-height-computed * 2;
+  @media (min-width: @screen-sm-min) {
+    display: block;
+  }
+}
 
-	.error-figure when (@is-overleaf = true) {
-		display: none;
-	}
+.error-figure when (@is-overleaf = true) {
+  display: none;
+}
 
-	.error-figure-500 {
-		&::before {
-			content: '';
-			display: block;
-			position: fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 80%;
-			background-image: url(/img/brand/500-visual-plug.svg);
-			background-size: 400px;
-			background-repeat: no-repeat;
-			background-position: right 70%;
-			pointer-events: none;
-		}
-		&::after {
-			content: '';
-			display: block;
-			position: fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 50%;
-			background-image: url(/img/brand/500-visual-tail.svg);
-			background-size: 100px;
-			background-repeat: no-repeat;
-			background-position: 90% bottom;
-			pointer-events: none;
-		}
-	}
-		.error-img {
-			display: block;
-			max-width: 380px;
-			height: auto;
-			margin: 0 auto;
-		}
+.error-figure-500 {
+  &::before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 80%;
+    background-image: url(/img/brand/500-visual-plug.svg);
+    background-size: 400px;
+    background-repeat: no-repeat;
+    background-position: right 70%;
+    pointer-events: none;
+  }
+  &::after {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 50%;
+    background-image: url(/img/brand/500-visual-tail.svg);
+    background-size: 100px;
+    background-repeat: no-repeat;
+    background-position: 90% bottom;
+    pointer-events: none;
+  }
+}
+.error-img {
+  display: block;
+  max-width: 380px;
+  height: auto;
+  margin: 0 auto;
+}
 
-	.error-details {
-		flex: 0 1 50%;
-		padding: @line-height-computed * 2;
-	}
-	
-	.error-details when (@is-overleaf = true) {
-		flex-grow: 1;
-	}
+.error-details {
+  flex: 0 1 50%;
+  padding: @line-height-computed * 2;
+}
 
-		.error-status {
-			font-family: @font-family-serif;
-			margin-bottom: (@line-height-computed / 4);
-			color: @gray-dark;
-			font-size: @font-size-h1;
-		}
-		.error-description {
-			font-family: @font-family-serif;
-			font-size: @font-size-h3;
-			color: @gray;
-			margin-bottom: @line-height-computed * 2;
-		}
-		.error-btn when (@is-overleaf = false) {
-			color: @navbar-default-link-color;
-			border: 2px solid @navbar-default-link-color;
-			border-radius: @border-radius-base;
-			font-weight: 700;
-			line-height: 1;
-			padding: @padding-base-vertical @padding-base-horizontal;
+.error-details when (@is-overleaf = true) {
+  flex-grow: 1;
+}
 
-			&:hover,
-			&:focus {
-				text-decoration: none;
-				color: #fff;
-				background-color: @navbar-default-link-hover-bg;
-				border: 2px solid @navbar-default-link-hover-color;
-			}
-		}
+.error-status {
+  font-family: @font-family-serif;
+  margin-bottom: (@line-height-computed / 4);
+  color: @gray-dark;
+  font-size: @font-size-h1;
+}
+.error-description {
+  font-family: @font-family-serif;
+  font-size: @font-size-h3;
+  color: @gray;
+  margin-bottom: @line-height-computed * 2;
+}
+.error-btn when (@is-overleaf = false) {
+  color: @navbar-default-link-color;
+  border: 2px solid @navbar-default-link-color;
+  border-radius: @border-radius-base;
+  font-weight: 700;
+  line-height: 1;
+  padding: @padding-base-vertical @padding-base-horizontal;
 
-		.error-btn when (@is-overleaf = true) {
-			.btn;
-			.btn-primary;
-			display: block;
-			@media (min-width: @screen-sm-min) {
-				display: inline-block;
-			}
-		}
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: #fff;
+    background-color: @navbar-default-link-hover-bg;
+    border: 2px solid @navbar-default-link-hover-color;
+  }
+}
+
+.error-btn when (@is-overleaf = true) {
+  .btn;
+  .btn-primary;
+  display: block;
+  @media (min-width: @screen-sm-min) {
+    display: inline-block;
+  }
+}

services/web/frontend/stylesheets/app/features.less

@@ -1,19 +1,19 @@
 .long-form-features {
-	h2 {
-		margin-top: 0;
-		margin-bottom: @line-height-computed;
-	}
-	img {
-		border-radius: 3px;
-		-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-		max-width: 100%;    
-		height: auto;
-	}
-	h3 {
-		margin: 0;
-	}
-	i {
-		color: lighten(@blue, 15%);
-	}
-}
+  h2 {
+    margin-top: 0;
+    margin-bottom: @line-height-computed;
+  }
+  img {
+    border-radius: 3px;
+    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    height: auto;
+  }
+  h3 {
+    margin: 0;
+  }
+  i {
+    color: lighten(@blue, 15%);
+  }
+}

services/web/frontend/stylesheets/app/front-chat-widget.less

@@ -1,3 +1,3 @@
-#front-chat-holder > div[role=button] {
-	margin-bottom: @footer-height;
-}
+#front-chat-holder > div[role='button'] {
+  margin-bottom: @footer-height;
+}

services/web/frontend/stylesheets/app/homepage.less

@@ -1,292 +1,312 @@
 @register-v-spacing: 20px;
 
 .deprecated-sl-masthead {
-	display: inline-block;
-	margin-top: @header-height;
-	width: 100%;
-	text-align: center;
-	h1 {
-		font-size: 3.3rem;
-		line-height: 5rem;
-		margin-bottom: 0;
-		margin-top: @line-height-computed;
-	}
-	.img {
-		max-width: 420px;
-		background-image: url('/img/ol_plus_sl.png');
-		background-size: 100%;
-		background-repeat: no-repeat;
-		margin: 20px auto 0;
-		height: 197px;
-	}
+  display: inline-block;
+  margin-top: @header-height;
+  width: 100%;
+  text-align: center;
+  h1 {
+    font-size: 3.3rem;
+    line-height: 5rem;
+    margin-bottom: 0;
+    margin-top: @line-height-computed;
+  }
+  .img {
+    max-width: 420px;
+    background-image: url('/img/ol_plus_sl.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    margin: 20px auto 0;
+    height: 197px;
+  }
 }
 .deprecated-sl-login-buttons {
-	margin: 35px 0;
+  margin: 35px 0;
 }
 .deprecated-sl-msg {
-	width: 80%;
-	margin: 35px auto 0;
+  width: 80%;
+  margin: 35px auto 0;
 }
 .deprecated-sl-long-cta {
-	padding-top: 12.5px;
-	padding-bottom: 93px;
-	.card {
-		margin-top: 12.5px;
-		min-height: 397px;
-	}
-	h3 {
-		margin-top: 0;
-	}
+  padding-top: 12.5px;
+  padding-bottom: 93px;
+  .card {
+    margin-top: 12.5px;
+    min-height: 397px;
+  }
+  h3 {
+    margin-top: 0;
+  }
 }
 
 .masthead {
-	background-image: -webkit-linear-gradient(to left, rgba(79,156,69,1.0), rgba(28,91,38,1.0));
-	background-image: linear-gradient(to left, rgba(79,156,69,1.0), rgba(28,91,38,1.0));
-	position: relative;
-	text-align: center;
-	overflow: hidden;
-	padding-top: @header-height;
-	h1, p, label {
-		color: white;
-		text-align: center;
-	}
-	h1 {
-		font-size: 4.75rem;
-		line-height: 6.25rem;
-		margin-bottom: 0;
-		margin-top: @line-height-computed;
-		text-shadow: 0 1px 3px rgba(0,0,0,0.42);
-		span {
-			font-family: @font-family-sans-serif;
-			font-weight: 100;
-			letter-spacing: 5px;
-		}
-	}
-	p:first-of-type {
-		font-size: @line-height-computed;
-		font-weight: 200;
-		margin-top: 0;
-		text-rendering: auto;
-		margin-bottom: @line-height-computed;
-	}
-	label {
-		display: block;
-	}
-	.register-banner {
-		background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
-		background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
-		padding: @register-v-spacing 0;
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		h2 {
-			color: white;
-			margin-top: 0;
-			font-family: @font-family-sans-serif;
-			font-weight: 500;
-			letter-spacing: 1px;
-			margin-bottom: @register-v-spacing;
-		}
-		.form-group {
-			margin-left: @line-height-computed / 2;
-		}
-		.input-lg {
-			border-radius: 9999px;
-		}
-	}
-	.hp-register-password-error {
-		margin-bottom: 9px;
-	}
-	.register-banner__password-error {
-		padding: 5px 9px;
-		border: none;
-		border-radius: @btn-border-radius-base;
-	}
-	.screenshot {
-		height: 600px;
-		margin: auto;
-		margin-bottom: -50px;
-		overflow-y: hidden;
-		box-shadow: 0 0 50px rgba(0,0,0,.67);
-		max-width: 960px;
-		.img {
-			max-width: 960px;
-			background-image: url('/img/homepage.png');
-			background-size: 100%;
-			background-repeat: no-repeat;
-			margin: auto;
-			height: 672px;
-		}
-		@media
-		only screen and (-webkit-min-device-pixel-ratio: 2),
-		only screen and (   min--moz-device-pixel-ratio: 2),
-		only screen and (     -o-min-device-pixel-ratio: 2/1),
-		only screen and (        min-device-pixel-ratio: 2),
-		only screen and (                min-resolution: 192dpi),
-		only screen and (                min-resolution: 2dppx) { 
-			.img {
-				background-image: url('/img/homepage@2x.png');
-			}
-		}
-	}
+  background-image: -webkit-linear-gradient(
+    to left,
+    rgba(79, 156, 69, 1),
+    rgba(28, 91, 38, 1)
+  );
+  background-image: linear-gradient(
+    to left,
+    rgba(79, 156, 69, 1),
+    rgba(28, 91, 38, 1)
+  );
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+  padding-top: @header-height;
+  h1,
+  p,
+  label {
+    color: white;
+    text-align: center;
+  }
+  h1 {
+    font-size: 4.75rem;
+    line-height: 6.25rem;
+    margin-bottom: 0;
+    margin-top: @line-height-computed;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
+    span {
+      font-family: @font-family-sans-serif;
+      font-weight: 100;
+      letter-spacing: 5px;
+    }
+  }
+  p:first-of-type {
+    font-size: @line-height-computed;
+    font-weight: 200;
+    margin-top: 0;
+    text-rendering: auto;
+    margin-bottom: @line-height-computed;
+  }
+  label {
+    display: block;
+  }
+  .register-banner {
+    background-image: -webkit-linear-gradient(
+      top,
+      rgba(0, 0, 0, 0.7),
+      rgba(0, 0, 0, 0.9)
+    );
+    background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.7),
+      rgba(0, 0, 0, 0.9)
+    );
+    padding: @register-v-spacing 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    h2 {
+      color: white;
+      margin-top: 0;
+      font-family: @font-family-sans-serif;
+      font-weight: 500;
+      letter-spacing: 1px;
+      margin-bottom: @register-v-spacing;
+    }
+    .form-group {
+      margin-left: @line-height-computed / 2;
+    }
+    .input-lg {
+      border-radius: 9999px;
+    }
+  }
+  .hp-register-password-error {
+    margin-bottom: 9px;
+  }
+  .register-banner__password-error {
+    padding: 5px 9px;
+    border: none;
+    border-radius: @btn-border-radius-base;
+  }
+  .screenshot {
+    height: 600px;
+    margin: auto;
+    margin-bottom: -50px;
+    overflow-y: hidden;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.67);
+    max-width: 960px;
+    .img {
+      max-width: 960px;
+      background-image: url('/img/homepage.png');
+      background-size: 100%;
+      background-repeat: no-repeat;
+      margin: auto;
+      height: 672px;
+    }
+    @media only screen and (-webkit-min-device-pixel-ratio: 2),
+      only screen and (min--moz-device-pixel-ratio: 2),
+      only screen and (-o-min-device-pixel-ratio: 2/1),
+      only screen and (min-device-pixel-ratio: 2),
+      only screen and (min-resolution: 192dpi),
+      only screen and (min-resolution: 2dppx) {
+      .img {
+        background-image: url('/img/homepage@2x.png');
+      }
+    }
+  }
 }
 
 .hp-register-external-separator {
-	margin: 0 0 (@register-v-spacing / 2);
-	color: #FFF;
+  margin: 0 0 (@register-v-spacing / 2);
+  color: #fff;
 }
 
-	.hp-register-external-separator-or {
-		vertical-align: middle;
-		&::before,
-		&::after {
-			content: "";
-			display: inline-block;
-			vertical-align: middle;
-			width: 5em;
-			height: 1px;
-			background-color: rgba(255, 255, 255, .3);
-		}
-		&::before {
-			margin-right: 1.25em;
-		}
-		&::after {
-			margin-left: 1.25em;
-		}
-	}
+.hp-register-external-separator-or {
+  vertical-align: middle;
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 5em;
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  &::before {
+    margin-right: 1.25em;
+  }
+  &::after {
+    margin-left: 1.25em;
+  }
+}
 
 .hp-register-newsletter-checkbox {
-	font-size: 90%;
-	& > .checkbox-newsletter {
-		text-align: left;
-		@media only screen and (min-width: @screen-sm-min) {
-			text-align: center;
-		}
-	}
+  font-size: 90%;
+  & > .checkbox-newsletter {
+    text-align: left;
+    @media only screen and (min-width: @screen-sm-min) {
+      text-align: center;
+    }
+  }
 }
 
 .hp-login-btn when (@is-overleaf = true) {
-	.login-btn;
-	min-width: 220px;
+  .login-btn;
+  min-width: 220px;
 
-	background-color: @ol-blue-gray-3;
+  background-color: @ol-blue-gray-3;
 
-	&:hover, &:focus, &:active {
-		background-color: darken(@ol-blue-gray-3, 8%);
-	}
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: darken(@ol-blue-gray-3, 8%);
+  }
 }
 
 .hp-register-form-email-pwd {
-	position: relative;
+  position: relative;
 }
 
-	.hp-register-form-email-pwd-btn-container.form-group {
-		display: block;
-		margin-top: (@register-v-spacing / 2);
-		@media only screen and (min-width: @screen-md-min) {
-			position: absolute;
-			display: inline-block;
-			height: 100%;
-			top: -(@register-v-spacing / 2);
-			& > .btn-hero {
-				height: 100%;
-			}
-		}
-	}
+.hp-register-form-email-pwd-btn-container.form-group {
+  display: block;
+  margin-top: (@register-v-spacing / 2);
+  @media only screen and (min-width: @screen-md-min) {
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    top: -(@register-v-spacing / 2);
+    & > .btn-hero {
+      height: 100%;
+    }
+  }
+}
 
 .universities-container {
-	border-bottom: 1px solid @gray-lighter;
+  border-bottom: 1px solid @gray-lighter;
 }
 .universities {
-	text-align: center;
-	.uni-logo {
-		display: inline-block;
-		padding: 0 @padding-md;
-		width: 20%;
-	}
+  text-align: center;
+  .uni-logo {
+    display: inline-block;
+    padding: 0 @padding-md;
+    width: 20%;
+  }
 }
 
 .pattern-container {
-	background: url('/img/pattern-home.png') repeat #f1f1f1;
-	border-top: 1px solid @gray-lightest;
-	border-bottom: 1px solid @gray-lightest;
+  background: url('/img/pattern-home.png') repeat #f1f1f1;
+  border-top: 1px solid @gray-lightest;
+  border-bottom: 1px solid @gray-lightest;
 }
 
 .pattern-grid {
-	background: url('/img/grid.png') repeat @content-alt-bg-color;
-	border-top: 1px solid @gray-lighter;
-	border-bottom: 1px solid @gray-lighter;
+  background: url('/img/grid.png') repeat @content-alt-bg-color;
+  border-top: 1px solid @gray-lighter;
+  border-bottom: 1px solid @gray-lighter;
 }
 
 .real-time-example {
-	.cursor {
-		background-color: hsl(200, 70%, 70%);
-		display: inline-block;
-		width: 2px;
-		color: transparent;
-		line-height: 1.4;
-		position: relative;
-		&:after {
-			content: "Joe";
-			top: 22px;
-			right: 0;
-			position: absolute;
-			display: block;
-			background-color: hsl(200, 70%, 70%);
-			padding: (@line-height-computed / 4) (@line-height-computed / 2);
-			font-size: 0.8rem;
-			z-index: 100;
-			font-family: @font-family-sans-serif;
-			color: white;
-			font-weight: 700;
-		}
-	}
+  .cursor {
+    background-color: hsl(200, 70%, 70%);
+    display: inline-block;
+    width: 2px;
+    color: transparent;
+    line-height: 1.4;
+    position: relative;
+    &:after {
+      content: 'Joe';
+      top: 22px;
+      right: 0;
+      position: absolute;
+      display: block;
+      background-color: hsl(200, 70%, 70%);
+      padding: (@line-height-computed / 4) (@line-height-computed / 2);
+      font-size: 0.8rem;
+      z-index: 100;
+      font-family: @font-family-sans-serif;
+      color: white;
+      font-weight: 700;
+    }
+  }
 }
 
 .track-changes-example {
-	.removed, .added {
-		color: #333;
-		margin: 0 -1px;
-		padding: 0 3px;
-	}
-	.added {
-		background-color: hsl(200, 70%, 80%);
-	}
-	
-	.removed {
-		background-color: hsl(200, 70%, 95%);
-		position: relative;
-		&:after {
-			content: " ";
-			position: absolute;
-			top: 50%;
-			left: 0;
-			right: 0;
-			border-top: 1px solid hsl(200, 70%, 40%);
-		}
-	}
+  .removed,
+  .added {
+    color: #333;
+    margin: 0 -1px;
+    padding: 0 3px;
+  }
+  .added {
+    background-color: hsl(200, 70%, 80%);
+  }
+
+  .removed {
+    background-color: hsl(200, 70%, 95%);
+    position: relative;
+    &:after {
+      content: ' ';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      border-top: 1px solid hsl(200, 70%, 40%);
+    }
+  }
 }
 
 .real-time-example-code {
-	border-radius: 3px;
-	border-left: 42px solid @gray-lighter;
-	background-color: white;
-	padding: 12px;
-	font-family: @font-family-monospace;
-	.highlight {
-		color: @blue;
-	}
-	box-shadow: 0 3px 5px rgba(0,0,0,.3);
+  border-radius: 3px;
+  border-left: 42px solid @gray-lighter;
+  background-color: white;
+  padding: 12px;
+  font-family: @font-family-monospace;
+  .highlight {
+    color: @blue;
+  }
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
 }
 
 @media only screen and (max-width: @screen-sm-max) {
-	.doc-history-example {
-		margin-bottom: @margin-md;
-	}
-	.universities {
-		.uni-logo {
-			padding: @padding-md;
-			width: 50%;
-		}
-	}
-}
+  .doc-history-example {
+    margin-bottom: @margin-md;
+  }
+  .universities {
+    .uni-logo {
+      padding: @padding-md;
+      width: 50%;
+    }
+  }
+}

services/web/frontend/stylesheets/app/institution-hub.less

@@ -10,7 +10,9 @@
       .overbox {
         font-size: 16px;
       }
-      .hub-big-number, .hub-number-label, .worked-on {
+      .hub-big-number,
+      .hub-number-label,
+      .worked-on {
         display: block;
         width: 50%;
       }
@@ -18,7 +20,8 @@
         padding-right: 10px;
         text-align: right;
       }
-      .hub-number-label, .worked-on {
+      .hub-number-label,
+      .worked-on {
         float: right;
       }
       .hub-number-label {

services/web/frontend/stylesheets/app/invite.less

@@ -1,19 +1,19 @@
 .project-invite-accept {
-	form {
-		padding-top: 15px;
-	}
-	margin-bottom: 30px;
+  form {
+    padding-top: 15px;
+  }
+  margin-bottom: 30px;
 }
 
 .project-name-tooltip .tooltip-inner {
-	max-width: 80vw;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  max-width: 80vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .project-invite-invalid {
-	.actions {
-		padding-top: 15px;
-	}
-	margin-bottom: 30px;
+  .actions {
+    padding-top: 15px;
+  }
+  margin-bottom: 30px;
 }

services/web/frontend/stylesheets/app/list/v1-import-modal.less

@@ -1,51 +1,51 @@
 .v1-import-title {
-	text-align: center;
-	margin-top: @line-height-computed / 2;
+  text-align: center;
+  margin-top: @line-height-computed / 2;
 }
 
 .v1-import-row {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .v1-import-col {
-	padding-left: 15px;
-	padding-right: 15px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
-	.v1-import-col ul {
-		margin-bottom: 0;
-	}
+.v1-import-col ul {
+  margin-bottom: 0;
+}
 
 .v1-import-col--left {
-	flex-shrink: 1.1;
+  flex-shrink: 1.1;
 }
 
 .v1-import-img {
-	width: 100%;
-	margin-top: 30px;
+  width: 100%;
+  margin-top: 30px;
 }
 
 .v1-import-cta {
-	margin-top: 20px;
-	margin-left: auto;
-	margin-right: auto;
-	width: 90%;
-	text-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+  text-align: center;
 }
 
 .v1-import-warning {
-	color: #4B7FD1;
-	font-size: 10em;
-	line-height: 1em;
+  color: #4b7fd1;
+  font-size: 10em;
+  line-height: 1em;
 }
 
 .v1-import-footer {
-	display: flex;
-	justify-content: space-evenly;
-	text-align: left;
+  display: flex;
+  justify-content: space-evenly;
+  text-align: left;
 }
 
-	.v1-import-btn {
-		width: 20rem;
-	}
+.v1-import-btn {
+  width: 20rem;
+}

services/web/frontend/stylesheets/app/login-register.less

@@ -1,158 +1,157 @@
-@brand-ieee-color       : #00629B;
-@brand-google-color     : #276fea; // Not the "official" color but modified for a11y
-@brand-twitter-color    : #1DA1F2;
-@brand-orcid-color      : #A6CE39;
+@brand-ieee-color : #00629B;
+@brand-google-color : #276fea; // Not the "official" color but modified for a11y
+@brand-twitter-color : #1DA1F2;
+@brand-orcid-color : #A6CE39;
 @brand-sharelatex-color : #A93529;
 
 .login-register-alternatives {
-	.form-group:last-child {
-		margin-bottom: 0;
-	}
+  .form-group:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .login-register-container {
-	max-width: 400px;
-	margin: 0 auto;
-}
-	.login-register-header {
-		padding-top: @line-height-computed;
-		padding-bottom: @line-height-computed - 5;
-		border-bottom: solid 1px @hr-border;
-	}
-		.login-register-header-heading {
-			margin: 0;
-			color: @text-color;
-		}
-
-	.login-register-card {
-		padding-top: 0;
-		padding-bottom: 0;
-		text-align: center;
-	}
-
-		.login-register-form,
-		.login-register-sharelatex {
-			padding: @line-height-computed;
-			border-bottom: solid 1px @hr-border;
-			&:last-child {
-				border-bottom-width: 0;
-			}
-		}
-		.login-register-other-links {
-			padding: @line-height-computed;
-		}
-
-		.login-register-text,
-		.login-register-hr-text-container {
-			margin: 0;
-		}
-
-		.login-register-text {
-			padding-bottom: 25px;
-			&:last-child {
-				padding-bottom: 0;
-			}
-		}
-
-		.login-register-hr-text-container {
-			line-height: 1;
-			position: relative;
-			padding: @line-height-computed 0;
-
-			&::before {
-				content: '';
-				position: absolute;
-				height: 1px;
-				background-color: @hr-border;
-				top: 50%;
-				left: 0;
-				right: 0;
-			}
-		}
-			.login-register-hr-text {
-				position: relative;
-				background-color: #FFF;
-				padding: 0 (@line-height-computed / 2);
-			}
-		.login-register-sharelatex-tooltip {
-			display: inline-block;
-			font-size: 135%;
-			position: relative;
-			top: 2px;
-			margin-left: 3px;
-			color: @link-color;
-			cursor: pointer;
-		}
-
-		.login-register-newsletter {
-			font-size: 90%;
-			margin-top: @line-height-computed;
-			text-align: left;
-
-			& > .checkbox {
-				margin-bottom: 0;
-			}
-		}
-
-		.login-btn {
-			.btn;
-			.btn-default;
-			position: relative;
-			padding-left: 20px;
-			padding-right: 0;
-		}
-
-		.login-btn-sharelatex {
-			background-color: @brand-sharelatex-color;
-			&:focus,
-			&:hover {
-				background-color: darken(@brand-sharelatex-color, 8%);
-			}
-			&:active {
-				background-color: darken(@brand-sharelatex-color, 16%);
-			}
-		} 
-
-			.login-btn-icon {
-				position: absolute;
-				top: 4px;
-				left: 4px;
-				background: #FFF url(/img/brand/lion.svg) center/20px no-repeat;
-				border-radius: 99999px;
-				width: 26px;
-				height: 26px;
-			
-				&::before {
-					content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
-				}
-			}
-
-			.login-btn-icon-ieee {
-				background-image: url(/img/other-brands/logo_ieee.svg);
-			}
-			.login-btn-icon-google {
-				background-image: url(/img/other-brands/logo_google.svg);
-			}
-			.login-btn-icon-twitter {
-				background-image: url(/img/other-brands/logo_twitter.svg);
-			}
-			.login-btn-icon-orcid {
-				background-image: url(/img/other-brands/logo_orcid.svg);
-			}
-			.login-btn-icon-sharelatex {
-				background-size: 22px;
-			}
-
-		.login-register-header-heading {
-			margin: 0;
-			color: @text-color;
-		}
+  max-width: 400px;
+  margin: 0 auto;
+}
+.login-register-header {
+  padding-top: @line-height-computed;
+  padding-bottom: @line-height-computed - 5;
+  border-bottom: solid 1px @hr-border;
+}
+.login-register-header-heading {
+  margin: 0;
+  color: @text-color;
+}
+
+.login-register-card {
+  padding-top: 0;
+  padding-bottom: 0;
+  text-align: center;
+}
+
+.login-register-form,
+.login-register-sharelatex {
+  padding: @line-height-computed;
+  border-bottom: solid 1px @hr-border;
+  &:last-child {
+    border-bottom-width: 0;
+  }
+}
+.login-register-other-links {
+  padding: @line-height-computed;
+}
+
+.login-register-text,
+.login-register-hr-text-container {
+  margin: 0;
+}
+
+.login-register-text {
+  padding-bottom: 25px;
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.login-register-hr-text-container {
+  line-height: 1;
+  position: relative;
+  padding: @line-height-computed 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    height: 1px;
+    background-color: @hr-border;
+    top: 50%;
+    left: 0;
+    right: 0;
+  }
+}
+.login-register-hr-text {
+  position: relative;
+  background-color: #fff;
+  padding: 0 (@line-height-computed / 2);
+}
+.login-register-sharelatex-tooltip {
+  display: inline-block;
+  font-size: 135%;
+  position: relative;
+  top: 2px;
+  margin-left: 3px;
+  color: @link-color;
+  cursor: pointer;
+}
+
+.login-register-newsletter {
+  font-size: 90%;
+  margin-top: @line-height-computed;
+  text-align: left;
+
+  & > .checkbox {
+    margin-bottom: 0;
+  }
+}
+
+.login-btn {
+  .btn;
+  .btn-default;
+  position: relative;
+  padding-left: 20px;
+  padding-right: 0;
+}
+
+.login-btn-sharelatex {
+  background-color: @brand-sharelatex-color;
+  &:focus,
+  &:hover {
+    background-color: darken(@brand-sharelatex-color, 8%);
+  }
+  &:active {
+    background-color: darken(@brand-sharelatex-color, 16%);
+  }
+}
+
+.login-btn-icon {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  background: #fff url(/img/brand/lion.svg) center/20px no-repeat;
+  border-radius: 99999px;
+  width: 26px;
+  height: 26px;
+
+  &::before {
+    content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
+  }
+}
+
+.login-btn-icon-ieee {
+  background-image: url(/img/other-brands/logo_ieee.svg);
+}
+.login-btn-icon-google {
+  background-image: url(/img/other-brands/logo_google.svg);
+}
+.login-btn-icon-twitter {
+  background-image: url(/img/other-brands/logo_twitter.svg);
+}
+.login-btn-icon-orcid {
+  background-image: url(/img/other-brands/logo_orcid.svg);
+}
+.login-btn-icon-sharelatex {
+  background-size: 22px;
+}
+
+.login-register-header-heading {
+  margin: 0;
+  color: @text-color;
+}
 
 .registration-message-heading {
-	color: @text-color;	
+  color: @text-color;
 }
 
 .registration-message-details {
-	font-size: 90%;
+  font-size: 90%;
 }
-

services/web/frontend/stylesheets/app/metrics.less

@@ -11,7 +11,7 @@
     margin: 0;
     padding: 40px 20px;
     background: #fff;
-    border: 1px solid #DFDFDF;
+    border: 1px solid #dfdfdf;
     .box {
       padding-bottom: 30px;
       overflow: hidden;
@@ -53,10 +53,10 @@
     display: block;
     height: 250px;
     text {
-      font-family: "Open Sans", sans-serif;
+      font-family: 'Open Sans', sans-serif;
     }
     &:not(:root) {
-      overflow: visible
+      overflow: visible;
     }
 
     &.hidden-legend-margin-fix {
@@ -90,7 +90,7 @@
 
     .metric-tooltip {
       top: -1em;
-      font-size: .5em;
+      font-size: 0.5em;
     }
   }
   // END: Metrics header
@@ -142,11 +142,11 @@
   }
 
   #csv {
-      padding-right: 10px;
+    padding-right: 10px;
   }
 
   h3 {
-      display: inline-block;
+    display: inline-block;
   }
 
   .section_header {
@@ -173,9 +173,9 @@
     .daterangepicker {
       margin-right: 15px;
     }
-		#metrics-dates {
-			padding: 0;
-		}
+    #metrics-dates {
+      padding: 0;
+    }
   }
 }
 

services/web/frontend/stylesheets/app/ol-chat.less

@@ -1,6 +1,6 @@
 // Styles for Chat panel in Overleaf v2
 
 .chat .message-wrapper .message .message-content a {
-	color: inherit;
-	text-decoration: underline;
+  color: inherit;
+  text-decoration: underline;
 }

services/web/frontend/stylesheets/app/ol-style-guide.less

@@ -1,66 +1,66 @@
 .renderColorSwatchClasses(@colorName) {
-	@colorVal: @@colorName;
-	@colorValRed: red(@colorVal);
-	@colorValGreen: green(@colorVal);
-	@colorValBlue: blue(@colorVal);
-	@colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})';
+  @colorVal: @@colorName;
+  @colorValRed: red(@colorVal);
+  @colorValGreen: green(@colorVal);
+  @colorValBlue: blue(@colorVal);
+  @colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})';
 
-	&.@{colorName} {
-		.color-swatch {
-			background-color: @colorVal;
-		}
-		.color-less-var::before {
-			content: '@@{colorName}';
-		}
-		.color-hex-val::before {
-			content: '@{colorVal}';
-		}
-		.color-rgb-val::before {
-			font-size: 10px;
-			content: '@{colorValAsRGB}';
-		}
-	}
+  &.@{colorName} {
+    .color-swatch {
+      background-color: @colorVal;
+    }
+    .color-less-var::before {
+      content: '@@{colorName}';
+    }
+    .color-hex-val::before {
+      content: '@{colorVal}';
+    }
+    .color-rgb-val::before {
+      font-size: 10px;
+      content: '@{colorValAsRGB}';
+    }
+  }
 }
 
 .color-row {
-	display: flex;
-	justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .color-box {
-	background: white;
-	margin: 10px 4px;
-	border-radius: 4px;
-	width: 16.666%;
-	.renderColorSwatchClasses(ol-blue-gray-1);
-	.renderColorSwatchClasses(ol-blue-gray-2);
-	.renderColorSwatchClasses(ol-blue-gray-3);
-	.renderColorSwatchClasses(ol-blue-gray-4);
-	.renderColorSwatchClasses(ol-blue-gray-5);
-	.renderColorSwatchClasses(ol-blue-gray-6);
-	.renderColorSwatchClasses(ol-green);
-	.renderColorSwatchClasses(ol-dark-green);
-	.renderColorSwatchClasses(ol-blue);
-	.renderColorSwatchClasses(ol-dark-blue);
-	.renderColorSwatchClasses(ol-red);
-	.renderColorSwatchClasses(ol-dark-red);
+  background: white;
+  margin: 10px 4px;
+  border-radius: 4px;
+  width: 16.666%;
+  .renderColorSwatchClasses(ol-blue-gray-1);
+  .renderColorSwatchClasses(ol-blue-gray-2);
+  .renderColorSwatchClasses(ol-blue-gray-3);
+  .renderColorSwatchClasses(ol-blue-gray-4);
+  .renderColorSwatchClasses(ol-blue-gray-5);
+  .renderColorSwatchClasses(ol-blue-gray-6);
+  .renderColorSwatchClasses(ol-green);
+  .renderColorSwatchClasses(ol-dark-green);
+  .renderColorSwatchClasses(ol-blue);
+  .renderColorSwatchClasses(ol-dark-blue);
+  .renderColorSwatchClasses(ol-red);
+  .renderColorSwatchClasses(ol-dark-red);
 }
 
 .color-swatch {
-	height: 100px;
-	width: 100px;
-	margin: 10px auto;
-	border-radius: 4px;
+  height: 100px;
+  width: 100px;
+  margin: 10px auto;
+  border-radius: 4px;
 }
 
 .color-label {
-	display: flex;
-	flex-direction: column;
-	margin: 0 3px 10px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 3px 10px;
 }
 
 .color-label pre {
-	font-size: 12px;
-	line-height: 1.8em;
-	margin: 0 auto;
-}
+  font-size: 12px;
+  line-height: 1.8em;
+  margin: 0 auto;
+}

services/web/frontend/stylesheets/app/plans-ol.less

@@ -1,14 +1,14 @@
-
 .plans {
-	blockquote {
-		footer{
-			/* accessibility fix */
-			color: @ol-blue-gray-3;
-		}
-	}
-	.plans-header{
-		h1, h2 {
-			color: @gray-dark;
-		}
-	}
-}
+  blockquote {
+    footer {
+      /* accessibility fix */
+      color: @ol-blue-gray-3;
+    }
+  }
+  .plans-header {
+    h1,
+    h2 {
+      color: @gray-dark;
+    }
+  }
+}

services/web/frontend/stylesheets/app/plans.less

@@ -1,161 +1,170 @@
 .plans {
-	p {
-		color: @gray-dark;
-		margin-bottom: @line-height-computed;
-	}
-	.best-value {
-		color: @brand-secondary;
-		line-height: @line-height-computed;
-		text-transform: capitalize;
-	}
-	blockquote {
-		footer{
-			/* accessibility fix */
-			color: @gray-med;
-		}
-	}
-	.btn-header {
-		font-family: @font-family-sans-serif;
-		margin-left: 10px;
-		margin-top: -10px;
-		text-shadow: 0 0 0;
-	}
-	.card .btn { white-space:normal; }
-	.card.features {
-		margin-top: @line-height-computed;
-		i {
-			color: @red;
-		}
-		p {
-			margin: 0;
-		}
-	}
-	.btn-header {
-		font-family: @font-family-sans-serif;
-		margin-left: 10px;
-		margin-top: -10px;
-		text-shadow: 0 0 0;
-	}
-	.card .btn { white-space:normal; }
-	.card-group {
-		.card-highlighted {
-			padding-top: @line-height-computed * 2;
-			padding-bottom: @line-height-computed * 2;
-		}
-	}
-	.card-first, .card-last {
-		background: @plans-non-highlighted;
-	}
-	.card-highlighted {
-		border: @border-width-base solid @border-color-base;
-		padding-top: 10px!important;
-		.best-value {
-			margin-bottom: 15px;
-		}
-		.card-header {
-			padding-bottom: 22px; /* align hr with other plans */
-		}
-	}
-	.card-header {
-		margin-bottom: 15px;
-	}
-	.circle {
-		font-size: 1.5rem;
-		font-weight: 700;
-		padding: 46px 18px;
-		margin: 0 auto @line-height-computed;
-		text-shadow: 0 -1px 1px darken(@link-color, 10%);
-		width: 120px;
-		height: 120px;
-		border-radius: 50%;
-		background-color: @brand-secondary;
-		color: white;
-		white-space: nowrap;
-		line-height: 1;
-		span.small {
-			color: rgba(255, 255, 255, 0.85);
-			font-size: @font-size-base * .8;
-		}
-	}
-	.circle-lg {
-		width: 150px;
-		height: 150px;
-		padding-top: 50px;
-	}
-	.circle-subtext {
-		font-size: 1rem;
-	}
-	.circle-img {
-		float: right;
-	}
-	.faq {
-		p {
-			margin: 0
-		}
-	}
-	.header-with-btn {
-		line-height: 1.6;
-	}
-	.plans-header{
-		h1, h2, p {
-			text-shadow: 0 -1px 1px white;
-		}
-		h1, h2 {
-			color: @red;
-		}
-		p {
-			margin-bottom: 0;
-		}
-	}
-	.plans-subheader {
-		margin-bottom: @line-height-computed;
-	}
-	.tagline {
-		margin-bottom: 20px;
-	}
-	ul.nav-pills {
-		text-align: center;
-		margin-bottom: @line-height-computed;
-		li {
-			float: none;
-			display: inline-block;
-		}
-		> li + li {
-			margin-left: @line-height-computed / 2;
-		}
-	}
+  p {
+    color: @gray-dark;
+    margin-bottom: @line-height-computed;
+  }
+  .best-value {
+    color: @brand-secondary;
+    line-height: @line-height-computed;
+    text-transform: capitalize;
+  }
+  blockquote {
+    footer {
+      /* accessibility fix */
+      color: @gray-med;
+    }
+  }
+  .btn-header {
+    font-family: @font-family-sans-serif;
+    margin-left: 10px;
+    margin-top: -10px;
+    text-shadow: 0 0 0;
+  }
+  .card .btn {
+    white-space: normal;
+  }
+  .card.features {
+    margin-top: @line-height-computed;
+    i {
+      color: @red;
+    }
+    p {
+      margin: 0;
+    }
+  }
+  .btn-header {
+    font-family: @font-family-sans-serif;
+    margin-left: 10px;
+    margin-top: -10px;
+    text-shadow: 0 0 0;
+  }
+  .card .btn {
+    white-space: normal;
+  }
+  .card-group {
+    .card-highlighted {
+      padding-top: @line-height-computed * 2;
+      padding-bottom: @line-height-computed * 2;
+    }
+  }
+  .card-first,
+  .card-last {
+    background: @plans-non-highlighted;
+  }
+  .card-highlighted {
+    border: @border-width-base solid @border-color-base;
+    padding-top: 10px !important;
+    .best-value {
+      margin-bottom: 15px;
+    }
+    .card-header {
+      padding-bottom: 22px; /* align hr with other plans */
+    }
+  }
+  .card-header {
+    margin-bottom: 15px;
+  }
+  .circle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    padding: 46px 18px;
+    margin: 0 auto @line-height-computed;
+    text-shadow: 0 -1px 1px darken(@link-color, 10%);
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background-color: @brand-secondary;
+    color: white;
+    white-space: nowrap;
+    line-height: 1;
+    span.small {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: @font-size-base * 0.8;
+    }
+  }
+  .circle-lg {
+    width: 150px;
+    height: 150px;
+    padding-top: 50px;
+  }
+  .circle-subtext {
+    font-size: 1rem;
+  }
+  .circle-img {
+    float: right;
+  }
+  .faq {
+    p {
+      margin: 0;
+    }
+  }
+  .header-with-btn {
+    line-height: 1.6;
+  }
+  .plans-header {
+    h1,
+    h2,
+    p {
+      text-shadow: 0 -1px 1px white;
+    }
+    h1,
+    h2 {
+      color: @red;
+    }
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .plans-subheader {
+    margin-bottom: @line-height-computed;
+  }
+  .tagline {
+    margin-bottom: 20px;
+  }
+  ul.nav-pills {
+    text-align: center;
+    margin-bottom: @line-height-computed;
+    li {
+      float: none;
+      display: inline-block;
+    }
+    > li + li {
+      margin-left: @line-height-computed / 2;
+    }
+  }
 }
 
 #changePlanSection {
-	padding-top: 30px;
-	.changePlanButton {
-		padding-top: 15px;
-	}
+  padding-top: 30px;
+  .changePlanButton {
+    padding-top: 15px;
+  }
 }
 
 .paymentPageFeatures {
-	h1, h2, h3 {
-		color: @gray-dark;
-	}
-	h3 {
-		font-size: 18px;
-		&:first-child {
-			margin-top: 0;
-		}
-	}
-	p {
-		font-size: 14px;
-		color: @gray;
-	}
-	.small {
-		font-size: 12px;
-	}
-
+  h1,
+  h2,
+  h3 {
+    color: @gray-dark;
+  }
+  h3 {
+    font-size: 18px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  p {
+    font-size: 14px;
+    color: @gray;
+  }
+  .small {
+    font-size: 12px;
+  }
 }
 
 .plansPageStudentLink {
-	margin-left: 20px;
-	margin-top: 20px;
+  margin-left: 20px;
+  margin-top: 20px;
 }
 
 /**
@@ -167,235 +176,239 @@
 
 /* Media Queries */
 @media (max-width: @screen-sm-max) {
-	.plans {
-		.card-group {
-			/*override style in cards.less */
-			.card {
-				margin-left: 0;
-				margin-right: 0;
-			}
-			.card-highlighted {
-				margin-top: @line-height-computed!important;
-			}
-		}
-		.circle-img {
-			float: left;
-			margin: 0 15px;
-		}
-		ul.nav-pills {
-			margin-bottom: @margin-xs;
-			li {
-				margin-bottom: @margin-sm;
-			}
-		}
-	} 
+  .plans {
+    .card-group {
+      /*override style in cards.less */
+      .card {
+        margin-left: 0;
+        margin-right: 0;
+      }
+      .card-highlighted {
+        margin-top: @line-height-computed!important;
+      }
+    }
+    .circle-img {
+      float: left;
+      margin: 0 15px;
+    }
+    ul.nav-pills {
+      margin-bottom: @margin-xs;
+      li {
+        margin-bottom: @margin-sm;
+      }
+    }
+  }
 }
 @media (min-width: @screen-md-min) {
-	.plans {
-		blockquote {
-			margin-bottom: 0;
-		}
-		.faq {
-			.row:nth-child(2) {
-				h3 {
-					margin-top: 0;
-				}
-			}
-		}
-		.top-switch {
-			.currency-dropdown {
-				margin-right: -15px;
-			}
-		}
-	}
+  .plans {
+    blockquote {
+      margin-bottom: 0;
+    }
+    .faq {
+      .row:nth-child(2) {
+        h3 {
+          margin-top: 0;
+        }
+      }
+    }
+    .top-switch {
+      .currency-dropdown {
+        margin-right: -15px;
+      }
+    }
+  }
 }
 
 .student-disclaimer {
-	font-size: 14px; /* match .paymentPageFeatures p */
-	color: @gray; /* match .paymentPageFeatures p */
-	margin: 12.5px 0 0 0;
+  font-size: 14px; /* match .paymentPageFeatures p */
+  color: @gray; /* match .paymentPageFeatures p */
+  margin: 12.5px 0 0 0;
 }
 
 /**
 	Plans Table
 */
 .plans-table {
-	border: 1px solid @gray-lighter;
-	background-color: @plans-non-highlighted;
-	margin: @best-val-height 0 15px 0;
-	table-layout: fixed;
-	width: 100%;
+  border: 1px solid @gray-lighter;
+  background-color: @plans-non-highlighted;
+  margin: @best-val-height 0 15px 0;
+  table-layout: fixed;
+  width: 100%;
 
-	th, td {
-		-moz-background-clip: padding;
-		-webkit-background-clip: padding;
-		background-clip: padding-box; /* needed for firefox when there is bg color */
-		border: 1px solid @gray-lighter;
-		padding: 6px;
-		text-align: center;
-		vertical-align: middle;
-	}
+  th,
+  td {
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box; /* needed for firefox when there is bg color */
+    border: 1px solid @gray-lighter;
+    padding: 6px;
+    text-align: center;
+    vertical-align: middle;
+  }
 
-	td {
-		font-weight: bold;
-	}
+  td {
+    font-weight: bold;
+  }
 
-	th {
-		border-top: 0;
-		font-family: @headings-font-family;
-		font-size: @font-size-h2;
-		font-weight: @headings-font-weight;
-		hyphens: auto;
-		line-height: @headings-line-height;
-		padding: 18px;
-	}
+  th {
+    border-top: 0;
+    font-family: @headings-font-family;
+    font-size: @font-size-h2;
+    font-weight: @headings-font-weight;
+    hyphens: auto;
+    line-height: @headings-line-height;
+    padding: 18px;
+  }
 
-	th:first-child, td:first-child {
-		border-left: 0;
-	}
+  th:first-child,
+  td:first-child {
+    border-left: 0;
+  }
 
-	th:last-child, td:last-child {
-		border-right: 0;
-	}
+  th:last-child,
+  td:last-child {
+    border-right: 0;
+  }
 
-	td:first-child {
-		font-weight: bold;
-		padding-left: 18px;
-		text-align: left;
-	}
+  td:first-child {
+    font-weight: bold;
+    padding-left: 18px;
+    text-align: left;
+  }
 
-	tr:first-child {
-		th {
-			position: relative;
-			/* keep here position here, otherwise messes up border on safari */
-		}
-	}
+  tr:first-child {
+    th {
+      position: relative;
+      /* keep here position here, otherwise messes up border on safari */
+    }
+  }
 
-	tr:last-child {
-		td {
-			border-bottom: 0;
-			padding: 18px;
-		}
-		/* highlighted column */
-		td:nth-child(3) {
-			position: relative;
-			/* keep here position here, otherwise messes up border on safari when there is a bg color */
-			&:before {
-				/* needed for safafi */
-				border-top: 1px solid @border-color-base;
-				content: '';
-				left: 0;
-				position: absolute;
-				top: -1px;
-				width: 100%;
-			}
-		}
-		td:first-child {
-			border: 0;
-		}
-	}
+  tr:last-child {
+    td {
+      border-bottom: 0;
+      padding: 18px;
+    }
+    /* highlighted column */
+    td:nth-child(3) {
+      position: relative;
+      /* keep here position here, otherwise messes up border on safari when there is a bg color */
+      &:before {
+        /* needed for safafi */
+        border-top: 1px solid @border-color-base;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: -1px;
+        width: 100%;
+      }
+    }
+    td:first-child {
+      border: 0;
+    }
+  }
 
-	.fa-check {
-		color: @green;
-	}
+  .fa-check {
+    color: @green;
+  }
 
-	/* accessibility fixes */
-	.small {
-		color: @gray-med;
-	}
+  /* accessibility fixes */
+  .small {
+    color: @gray-med;
+  }
 
-	/* highlighted column */
-	td:nth-child(3), th:nth-child(3) {
-		background-color: white;
-		border-left: @border-width-base solid @border-color-base;
-		border-right: @border-width-base solid @border-color-base;
-	}
-	.outer {
-		left: -@border-width-base;
-		right: -@border-width-base;
-		position: absolute;
+  /* highlighted column */
+  td:nth-child(3),
+  th:nth-child(3) {
+    background-color: white;
+    border-left: @border-width-base solid @border-color-base;
+    border-right: @border-width-base solid @border-color-base;
+  }
+  .outer {
+    left: -@border-width-base;
+    right: -@border-width-base;
+    position: absolute;
 
-		.outer-content {
-			background: white;
-			border: @border-width-base solid @border-color-base;
-			border-radius: @border-radius-base;
-			font-size: @font-size-base;
-			font-family: @font-family-sans-serif;
-			font-weight: bold;
-			height: @best-val-height;
-			padding-top: 10px;
-		}
-	}
-	.outer.outer-top {
-		top: -@best-val-height;
-		.outer-content {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-			border-bottom: 0;
-		}
-	}
-	.outer.outer-btm {
-		bottom: -@best-val-height/2;
-		.outer-content {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			border-top: 0;
-			height: @best-val-height/2;
-		}
-	}
+    .outer-content {
+      background: white;
+      border: @border-width-base solid @border-color-base;
+      border-radius: @border-radius-base;
+      font-size: @font-size-base;
+      font-family: @font-family-sans-serif;
+      font-weight: bold;
+      height: @best-val-height;
+      padding-top: 10px;
+    }
+  }
+  .outer.outer-top {
+    top: -@best-val-height;
+    .outer-content {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: 0;
+    }
+  }
+  .outer.outer-btm {
+    bottom: -@best-val-height / 2;
+    .outer-content {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: 0;
+      height: @best-val-height / 2;
+    }
+  }
 
-	/* highlight rows on hover */
-	tr:hover {
-		td {
-			background-color: @table-hover-bg;
-		}
-	}
-	tr:first-child:hover {
-		background-color: transparent;
-	}
-	tr:last-child:hover {
-		background-color: transparent;
-		td {
-			background-color: transparent;
-		}
-	}
+  /* highlight rows on hover */
+  tr:hover {
+    td {
+      background-color: @table-hover-bg;
+    }
+  }
+  tr:first-child:hover {
+    background-color: transparent;
+  }
+  tr:last-child:hover {
+    background-color: transparent;
+    td {
+      background-color: transparent;
+    }
+  }
 
-	/* tooltip */
-	sup {
-		color: @brand-secondary;
-		cursor: pointer;
-		margin-left: 5px;
-	}
-	.tooltip.in {
-		min-width: 200px
-	}
+  /* tooltip */
+  sup {
+    color: @brand-secondary;
+    cursor: pointer;
+    margin-left: 5px;
+  }
+  .tooltip.in {
+    min-width: 200px;
+  }
 
-	/* Media Queries */
-	@media (max-width: @screen-sm-max) {
-		font-size: @font-size-small;
-		hyphens: auto;
-		margin-top: @best-val-height*2;
-		th {
-			font-size: @font-size-base;
-			padding-left: @padding-xs;
-			padding-right: @padding-xs;
-		}
-		td:first-child {
-			padding-left: @padding-xs;
-		}
-		tr:last-child {
-			td {
-				padding: @padding-xs;
-				.btn {
-					word-break: normal;
-				}
-			}
-		}
-		.best-value {
-			line-height: 1;
-		}
-		.btn {
-			font-size: @font-size-small;
-		}
-	}
-}
+  /* Media Queries */
+  @media (max-width: @screen-sm-max) {
+    font-size: @font-size-small;
+    hyphens: auto;
+    margin-top: @best-val-height*2;
+    th {
+      font-size: @font-size-base;
+      padding-left: @padding-xs;
+      padding-right: @padding-xs;
+    }
+    td:first-child {
+      padding-left: @padding-xs;
+    }
+    tr:last-child {
+      td {
+        padding: @padding-xs;
+        .btn {
+          word-break: normal;
+        }
+      }
+    }
+    .best-value {
+      line-height: 1;
+    }
+    .btn {
+      font-size: @font-size-small;
+    }
+  }
+}

services/web/frontend/stylesheets/app/publisher-hub.less

@@ -1,6 +1,6 @@
-#publisher-hub{
+#publisher-hub {
   .recent-activity {
-    .hub-big-number{
+    .hub-big-number {
       text-align: right;
       padding-right: 15px;
     }
@@ -8,19 +8,19 @@
 
   #templates-container {
     width: 100%;
-    tr{
+    tr {
       border: 1px solid @ol-blue-gray-0;
     }
-    td{
+    td {
       padding: 15px;
     }
     td:last-child {
       text-align: right;
     }
-    .title-cell{
+    .title-cell {
       max-width: 300px;
     }
-    .title-text{
+    .title-text {
       font-weight: bold;
     }
     .hub-big-number {
@@ -29,7 +29,8 @@
       padding-top: 10px;
       text-align: right;
     }
-    .hub-number-label, .since {
+    .hub-number-label,
+    .since {
       width: 35%;
       float: right;
       @media screen and (max-width: 940px) {
@@ -45,4 +46,4 @@
       font-size: 14px;
     }
   }
-}
+}

services/web/frontend/stylesheets/app/recurly.less

@@ -1,3 +1,3 @@
 .recurly-hosted-field {
-	&:extend(.form-control);
+  &:extend(.form-control);
 }

services/web/frontend/stylesheets/app/register.less

@@ -1,4 +1,4 @@
 .registration_message {
-	text-align:center;
-	padding-bottom: 20px;
-}
+  text-align: center;
+  padding-bottom: 20px;
+}

services/web/frontend/stylesheets/app/review-features-page.less

@@ -6,456 +6,456 @@
 @rfp-sl-red: @red;
 @rfp-rp-blue: @rp-type-blue;
 
-@rfp-rp-blue-light: #F8F9FD;
+@rfp-rp-blue-light: #f8f9fd;
 @rfp-rp-blue-dark: shade(@rfp-rp-blue, 50%);
 @rfp-rp-blue-darker: shade(@rfp-rp-blue, 65%);
 @rfp-rp-blue-darkest: shade(@rfp-rp-blue, 75%);
 
-@rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, .3);
+@rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.3);
 @rfp-border-radius: 5px;
 
 @rfp-header-height: 80px;
 @rfp-header-height-collapsed: 50px;
 
 .rfp-main {
-	background-color: @content-alt-bg-color;
-	font-size: 18px;
-	min-width: 240px;
+  background-color: @content-alt-bg-color;
+  font-size: 18px;
+  min-width: 240px;
 }
 
-	// Typographical scale and basics.
-	.rfp-h1 {
-		font-size: @rfp-h2-size;
-		margin-bottom: 1.6em;
-		color: inherit;
-		@media (min-width: @screen-xs-min) {
-			font-size: @rfp-h1-size;
-		}
-	}
-		.rfp-h1-masthead {
-			color: #FFF;
-			margin-bottom: 1em;
-		}
-	.rfp-h2 {
-		font-size: @rfp-h2-size;
-		margin-bottom: 1.6em;
-		color: inherit;
-	}
-	.rfp-h3 {
-		font-size: @rfp-h3-size;
-		margin-bottom: 1.6em;
-		color: inherit;
-	}
-		.rfp-h3-cta {
-			margin-top: 0;
-			margin-bottom: 40px;
-		}
-	.rfp-lead {
-		margin-bottom: 1.6em;
-		max-width: 30em;
-		margin-left: auto;
-		margin-right: auto;
-		@media (min-width: @screen-xs-min) {
-			font-size: @rfp-lead-size;
-		}			
-	}
-		.rfp-lead-cta {
-			margin-top: 0;
-			margin-bottom: 40px;
-		}
-	.rfp-lead-strong {
-		font-weight: 700;
-		.rfp-section-masthead & {
-			margin-bottom: 0;
-		}
-	}
-	.rfp-p {
-		margin-bottom: 1.6em;
-		max-width: 30em;
-		margin-left: auto;
-		margin-right: auto;
-		.rfp-section-feature & {
-			margin-left: initial;
-		}
-		.rfp-section-feature-alt & {
-			margin-left: auto;
-			margin-right: initial;
-		}
-	}
-	.rfp-highlight {
-		font-weight: 700;
-	}
-	// Sections
-	.rfp-header {
-		position: fixed;
-		top: 0;
-		width: 100%;
-		z-index: 2;
-		height: @rfp-header-height;
-		transition: height .2s;
-		background-color: fade(@rfp-rp-blue-darkest, 90%);
-		padding: 15px 20px;
-		min-width: 320px;
-		@media (min-width: @screen-xs-min) {
-			padding-left: 30px;
-			padding-right: 30px;
-		}
-		@media (min-width: @screen-sm-min) {
-			padding-left: 60px;
-			padding-right: 60px;
-		}
-		.rfp-main-header-collapsed & {
-			height: @rfp-header-height-collapsed;
-			padding-top: 10px;
-			padding-bottom: 10px;
-		}
-	}
-		.rfp-header-wrapper {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			max-width: @container-large-desktop;
-			height: 100%;
-			margin: auto;
-		}
-			.rfp-header-logo-container,
-			.rfp-header-logo {
-				height: 100%;
-			}
-	.rfp-section {
-		padding: 30px;
-		text-align: center;
-		overflow: hidden;
-		@media (min-width: @screen-xs-min) {
-			padding: 30px;
-		}
-		@media (min-width: @screen-sm-min) {
-			padding: 60px;
-		}
-	}
-	.rfp-section-masthead {
-		color: #FFF;
-		background-size: cover;
-		background-position: center;
-		background-color: @rfp-rp-blue-darker;
-		padding-top: @rfp-header-height;
-		.rfp-lead {
-			opacity: 0;
-			transition: opacity 0.8s ease;
-		}
-		&.rfp-section-masthead-in {
-			.rfp-lead {
-				opacity: 1;
-			}
-		}
-	}
-	.rfp-section-blockquote {
-		position: relative;
-		padding-top: 30px;
-		padding-bottom: 30px;
-		background-color: @brand-secondary;
-		box-shadow: @rfp-card-shadow;
-	}
-	.rfp-section-feature {
-		display: block;
-		text-align: left;
-		@media (min-width: @screen-sm-min) {
-			.rfp-section-wrapper {
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-		.rfp-feature-description-container,
-		.rfp-feature-video-container {
-			flex: 0 0 50%;
-		}
-		.rfp-feature-description-container {
-			@media (min-width: @screen-sm-min) {
-				padding-right: 1em;
-				.rfp-section-feature-alt & {
-					padding-right: 0;
-					padding-left: 1em;
-				}
-			}
-		}
-		.rfp-feature-video-container {
-			@media (min-width: @screen-sm-min) {
-				padding-left: 1em;
-				.rfp-section-feature-alt & {
-					padding-left: 0;
-					padding-right: 1em;
-					order: -1;
-				}
-			}
-		}
-	.rfp-section-feature-alt {
-		color: #FFF;
-		background-color: @ol-blue-gray-5;
-		@media (min-width: @screen-sm-min) {
-			text-align: right;
-		}
-	}
-	.rfp-section-feature-white {
-		background: #ffffff;
-	}
-	.rfp-section-testimonials {
-		background-color: @rfp-rp-blue-darkest;
-	}
-	.rfp-section-final {
-		background-color: @rfp-rp-blue-darker;
-	}
-		.rfp-section-wrapper {
-			max-width: @container-large-desktop;
-			margin: 0 auto;
-		}
-	// Elements
-	.rfp-h1-masthead-portion {
-		display: inline-block;
-		transform: translate(150px, 0);
-		opacity: 0;
-		transition: transform 0.8s ease 0s, opacity 0.8s ease 0s;
-		&:nth-child(2) {
-			transition-delay: 0.5s, 0.5s;
-		}		
-		&:nth-child(3) {
-			transition-delay: 0.5s, 0.5s;
-		}
-		&:nth-child(4) {
-			transition-delay: 1s, 1s;
-		}
-		&:nth-child(5) {
-			transition-delay: 1s, 1s;
-		}
+// Typographical scale and basics.
+.rfp-h1 {
+  font-size: @rfp-h2-size;
+  margin-bottom: 1.6em;
+  color: inherit;
+  @media (min-width: @screen-xs-min) {
+    font-size: @rfp-h1-size;
+  }
+}
+.rfp-h1-masthead {
+  color: #fff;
+  margin-bottom: 1em;
+}
+.rfp-h2 {
+  font-size: @rfp-h2-size;
+  margin-bottom: 1.6em;
+  color: inherit;
+}
+.rfp-h3 {
+  font-size: @rfp-h3-size;
+  margin-bottom: 1.6em;
+  color: inherit;
+}
+.rfp-h3-cta {
+  margin-top: 0;
+  margin-bottom: 40px;
+}
+.rfp-lead {
+  margin-bottom: 1.6em;
+  max-width: 30em;
+  margin-left: auto;
+  margin-right: auto;
+  @media (min-width: @screen-xs-min) {
+    font-size: @rfp-lead-size;
+  }
+}
+.rfp-lead-cta {
+  margin-top: 0;
+  margin-bottom: 40px;
+}
+.rfp-lead-strong {
+  font-weight: 700;
+  .rfp-section-masthead & {
+    margin-bottom: 0;
+  }
+}
+.rfp-p {
+  margin-bottom: 1.6em;
+  max-width: 30em;
+  margin-left: auto;
+  margin-right: auto;
+  .rfp-section-feature & {
+    margin-left: initial;
+  }
+  .rfp-section-feature-alt & {
+    margin-left: auto;
+    margin-right: initial;
+  }
+}
+.rfp-highlight {
+  font-weight: 700;
+}
+// Sections
+.rfp-header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+  height: @rfp-header-height;
+  transition: height 0.2s;
+  background-color: fade(@rfp-rp-blue-darkest, 90%);
+  padding: 15px 20px;
+  min-width: 320px;
+  @media (min-width: @screen-xs-min) {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  @media (min-width: @screen-sm-min) {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+  .rfp-main-header-collapsed & {
+    height: @rfp-header-height-collapsed;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}
+.rfp-header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: @container-large-desktop;
+  height: 100%;
+  margin: auto;
+}
+.rfp-header-logo-container,
+.rfp-header-logo {
+  height: 100%;
+}
+.rfp-section {
+  padding: 30px;
+  text-align: center;
+  overflow: hidden;
+  @media (min-width: @screen-xs-min) {
+    padding: 30px;
+  }
+  @media (min-width: @screen-sm-min) {
+    padding: 60px;
+  }
+}
+.rfp-section-masthead {
+  color: #fff;
+  background-size: cover;
+  background-position: center;
+  background-color: @rfp-rp-blue-darker;
+  padding-top: @rfp-header-height;
+  .rfp-lead {
+    opacity: 0;
+    transition: opacity 0.8s ease;
+  }
+  &.rfp-section-masthead-in {
+    .rfp-lead {
+      opacity: 1;
+    }
+  }
+}
+.rfp-section-blockquote {
+  position: relative;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  background-color: @brand-secondary;
+  box-shadow: @rfp-card-shadow;
+}
+.rfp-section-feature {
+  display: block;
+  text-align: left;
+  @media (min-width: @screen-sm-min) {
+    .rfp-section-wrapper {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.rfp-feature-description-container,
+.rfp-feature-video-container {
+  flex: 0 0 50%;
+}
+.rfp-feature-description-container {
+  @media (min-width: @screen-sm-min) {
+    padding-right: 1em;
+    .rfp-section-feature-alt & {
+      padding-right: 0;
+      padding-left: 1em;
+    }
+  }
+}
+.rfp-feature-video-container {
+  @media (min-width: @screen-sm-min) {
+    padding-left: 1em;
+    .rfp-section-feature-alt & {
+      padding-left: 0;
+      padding-right: 1em;
+      order: -1;
+    }
+  }
+}
+.rfp-section-feature-alt {
+  color: #fff;
+  background-color: @ol-blue-gray-5;
+  @media (min-width: @screen-sm-min) {
+    text-align: right;
+  }
+}
+.rfp-section-feature-white {
+  background: #ffffff;
+}
+.rfp-section-testimonials {
+  background-color: @rfp-rp-blue-darkest;
+}
+.rfp-section-final {
+  background-color: @rfp-rp-blue-darker;
+}
+.rfp-section-wrapper {
+  max-width: @container-large-desktop;
+  margin: 0 auto;
+}
+// Elements
+.rfp-h1-masthead-portion {
+  display: inline-block;
+  transform: translate(150px, 0);
+  opacity: 0;
+  transition: transform 0.8s ease 0s, opacity 0.8s ease 0s;
+  &:nth-child(2) {
+    transition-delay: 0.5s, 0.5s;
+  }
+  &:nth-child(3) {
+    transition-delay: 0.5s, 0.5s;
+  }
+  &:nth-child(4) {
+    transition-delay: 1s, 1s;
+  }
+  &:nth-child(5) {
+    transition-delay: 1s, 1s;
+  }
 
-		.rfp-section-masthead-in & {
-			transform: translate(0, 0);
-			opacity: 1;
-		}
-	}
-	.rfp-video {
-		max-width: 100%;
-		box-shadow: @rfp-card-shadow;
-		border-radius: @rfp-border-radius;
-	}
-		.rfp-video-masthead {
-			width: 270px;
-			height: 163px;
-			margin-bottom: 2em;
-			transform: translate(0, 100px);
-			opacity: 0;
-			transition: transform 0.8s ease 1s, opacity 0.8s ease 1s;
-			box-shadow: none;
-			max-width: none;
+  .rfp-section-masthead-in & {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+.rfp-video {
+  max-width: 100%;
+  box-shadow: @rfp-card-shadow;
+  border-radius: @rfp-border-radius;
+}
+.rfp-video-masthead {
+  width: 270px;
+  height: 163px;
+  margin-bottom: 2em;
+  transform: translate(0, 100px);
+  opacity: 0;
+  transition: transform 0.8s ease 1s, opacity 0.8s ease 1s;
+  box-shadow: none;
+  max-width: none;
 
-			@media (min-width: @screen-xs-min) {
-				width: 400px;
-				height: 241px;
-			}
-			@media (min-width: 600px) {
-				width: 525px;
-				height: 316px;
-			}
-			@media (min-width: @screen-sm-min) {
-				width: 633px;
-				height: 381px;
-			}
-			@media (min-width: @screen-sm-min) {
-				width: 697px;
-				height: 420px;
-			}
-			.rfp-section-masthead-in & {
-				transform: translate(0, 0);
-				opacity: 1;
-				box-shadow: @rfp-card-shadow;
-			}
-		}
-		.rfp-video-anim {
-			transition: transform 0.8s ease, opacity 0.8s ease;
-			transform:	translate(100%, 0);
-			opacity: 0;
-		}
-			.rfp-video-anim-alt {
-				transform: translate(-100%, 0);
-			}
-			.rfp-video-anim-in {
-				transform: translate(0, 0);
-				opacity: 1;
-			}
-	.rfp-quote-section {
-		@media (min-width: @screen-md-min) {
-			display: flex;
-		}
-	}
-	.rfp-quote {
-		display: block;
-		width: 100%;
-		padding: 20px 40px;
-		border-left: 0;
-		max-width: 30em;
-		font-size: @rfp-lead-size;
-		quotes: "\201C" "\201D";
-		box-shadow: @rfp-card-shadow;
-		border-radius: @rfp-border-radius;
-		background-color: #FFF;
-		color: @rfp-rp-blue-dark;
-		font-size: 1em;
-		margin: 0 auto 20px;
+  @media (min-width: @screen-xs-min) {
+    width: 400px;
+    height: 241px;
+  }
+  @media (min-width: 600px) {
+    width: 525px;
+    height: 316px;
+  }
+  @media (min-width: @screen-sm-min) {
+    width: 633px;
+    height: 381px;
+  }
+  @media (min-width: @screen-sm-min) {
+    width: 697px;
+    height: 420px;
+  }
+  .rfp-section-masthead-in & {
+    transform: translate(0, 0);
+    opacity: 1;
+    box-shadow: @rfp-card-shadow;
+  }
+}
+.rfp-video-anim {
+  transition: transform 0.8s ease, opacity 0.8s ease;
+  transform: translate(100%, 0);
+  opacity: 0;
+}
+.rfp-video-anim-alt {
+  transform: translate(-100%, 0);
+}
+.rfp-video-anim-in {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+.rfp-quote-section {
+  @media (min-width: @screen-md-min) {
+    display: flex;
+  }
+}
+.rfp-quote {
+  display: block;
+  width: 100%;
+  padding: 20px 40px;
+  border-left: 0;
+  max-width: 30em;
+  font-size: @rfp-lead-size;
+  quotes: '\201C' '\201D';
+  box-shadow: @rfp-card-shadow;
+  border-radius: @rfp-border-radius;
+  background-color: #fff;
+  color: @rfp-rp-blue-dark;
+  font-size: 1em;
+  margin: 0 auto 20px;
 
-		@media (min-width: @screen-xs-min) {
-			font-size: @rfp-lead-size;
-		}
+  @media (min-width: @screen-xs-min) {
+    font-size: @rfp-lead-size;
+  }
 
-		@media (min-width: @screen-md-min) {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			flex: 0 1 50%;
-			margin-right: 20px;
-		}
-		// Override weird Boostrap default.
-		p {
-			display: block;
-		}
-		&:last-of-type {
-			@media (min-width: @screen-md-min) {
-				margin-right: 0;
-			}
-		}
-		&::before {
-			content: none;
-		}
-	}
-	.rfp-quote-main {
-		color: #ffffff;
-		display: block;
-		max-width: none;
-		border-left: 0;
-		margin: 0 auto;
-		padding: 0;
-		quotes: "\201C" "\201D";
-		font-size: @rfp-lead-size;
-		@media (min-width: @screen-md-min) {
-			display: flex;
-		}
-		// Override weird Boostrap default.
-		p {
-			display: block;
-		}
-		&::before {
-			content: none;
-		}
-	}
-		.rfp-quoted-text {
-			position: relative;
-			display: inline-block;
-			font-family: @font-family-serif;
-			font-style: italic;
-			text-align: left;
-			margin: 0 0 40px 0;
-			&::before {
-				content: open-quote;
-				display: block;
-				position: absolute;
-				font-family: @font-family-serif;
-				font-size: @rfp-lead-size;
-				line-height: inherit;
-				color: inherit;
-				left: -0.75em;
-			}
-			.rfp-quote-main & {
-				@media (min-width: @screen-md-min) {
-					flex: 1 1 70%;
-					margin: auto 40px auto auto;
-				}
-			}
-		}
-		.rfp-quoted-person {
-			display: inline-block;
-			font-size: .8em;
-			.rfp-quote-main & {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex: 0 0 30%;
-			}
-		}
-			.rfp-quoted-person-name {
-				margin: 0;
-			}
-			.rfp-quoted-person-affil {
-				margin: 0;
-				font-size: .8em;
-				&:hover,
-				&:focus {
-					text-decoration: none;
-					cursor: pointer;
-				}
-				.rfp-quote-main & {
-					color: #FFF;
-					&:hover,
-					&:focus {
-						color: #FFF;
-					}
-				}
-			}
-			.rfp-quoted-person-photo {
-				border-radius: 3em;
-				width: 6em;
-				margin-bottom: 20px;
-				.rfp-quote-main & {
-					margin-bottom: 0;
-					margin-right: 20px;
-				}
-			}
-		.rfp-users {
-			display: flex;
-			flex-wrap: wrap;
-			margin: 0 1em 2em;
-			@media (min-width: @screen-md-min) {
-				flex-wrap: nowrap;
-				align-items: center;
-			}
-		}
-			.rfp-user-container {
-				flex: 0 0 100%;
-				padding: 10px;
-				@media (min-width: @screen-xs-min) {
-					flex-basis: 50%;
-				}
-				@media (min-width: @screen-md-min) {
-					flex-basis: 25%;
-					padding: 20px;
-				}
-			}
-				.rfp-user-logo {
-					max-width: 100%;
-				}
-		.rfp-cta-container {
-			max-width: 40em;
-			margin: 0 auto;
-			padding: 40px;
-			background-color: #FFF;
-			color: @rfp-rp-blue-dark;
-			box-shadow: @rfp-card-shadow;
- 			border-radius: @rfp-border-radius;
-		}
-			.rfp-cta-header {
-				font-size: 1em;
-				padding: .2em 1em;
-			}
-				.rfp-cta-main {
-					display: block;
-					transition: transform 0.25s;
-					transform: translate(0, 0);
-				}
-				.rfp-cta-extra {
-					display: block;
-					position: absolute;
-					left: 50%;
-					text-transform: uppercase;
-					transition: opacity 0.25s, transform 0.25s;
-					transform: translate(-50%, 100%);
-					opacity: 0;
-					font-size: 0.5em;
-				}
+  @media (min-width: @screen-md-min) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 0 1 50%;
+    margin-right: 20px;
+  }
+  // Override weird Boostrap default.
+  p {
+    display: block;
+  }
+  &:last-of-type {
+    @media (min-width: @screen-md-min) {
+      margin-right: 0;
+    }
+  }
+  &::before {
+    content: none;
+  }
+}
+.rfp-quote-main {
+  color: #ffffff;
+  display: block;
+  max-width: none;
+  border-left: 0;
+  margin: 0 auto;
+  padding: 0;
+  quotes: '\201C' '\201D';
+  font-size: @rfp-lead-size;
+  @media (min-width: @screen-md-min) {
+    display: flex;
+  }
+  // Override weird Boostrap default.
+  p {
+    display: block;
+  }
+  &::before {
+    content: none;
+  }
+}
+.rfp-quoted-text {
+  position: relative;
+  display: inline-block;
+  font-family: @font-family-serif;
+  font-style: italic;
+  text-align: left;
+  margin: 0 0 40px 0;
+  &::before {
+    content: open-quote;
+    display: block;
+    position: absolute;
+    font-family: @font-family-serif;
+    font-size: @rfp-lead-size;
+    line-height: inherit;
+    color: inherit;
+    left: -0.75em;
+  }
+  .rfp-quote-main & {
+    @media (min-width: @screen-md-min) {
+      flex: 1 1 70%;
+      margin: auto 40px auto auto;
+    }
+  }
+}
+.rfp-quoted-person {
+  display: inline-block;
+  font-size: 0.8em;
+  .rfp-quote-main & {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 30%;
+  }
+}
+.rfp-quoted-person-name {
+  margin: 0;
+}
+.rfp-quoted-person-affil {
+  margin: 0;
+  font-size: 0.8em;
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .rfp-quote-main & {
+    color: #fff;
+    &:hover,
+    &:focus {
+      color: #fff;
+    }
+  }
+}
+.rfp-quoted-person-photo {
+  border-radius: 3em;
+  width: 6em;
+  margin-bottom: 20px;
+  .rfp-quote-main & {
+    margin-bottom: 0;
+    margin-right: 20px;
+  }
+}
+.rfp-users {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 1em 2em;
+  @media (min-width: @screen-md-min) {
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+}
+.rfp-user-container {
+  flex: 0 0 100%;
+  padding: 10px;
+  @media (min-width: @screen-xs-min) {
+    flex-basis: 50%;
+  }
+  @media (min-width: @screen-md-min) {
+    flex-basis: 25%;
+    padding: 20px;
+  }
+}
+.rfp-user-logo {
+  max-width: 100%;
+}
+.rfp-cta-container {
+  max-width: 40em;
+  margin: 0 auto;
+  padding: 40px;
+  background-color: #fff;
+  color: @rfp-rp-blue-dark;
+  box-shadow: @rfp-card-shadow;
+  border-radius: @rfp-border-radius;
+}
+.rfp-cta-header {
+  font-size: 1em;
+  padding: 0.2em 1em;
+}
+.rfp-cta-main {
+  display: block;
+  transition: transform 0.25s;
+  transform: translate(0, 0);
+}
+.rfp-cta-extra {
+  display: block;
+  position: absolute;
+  left: 50%;
+  text-transform: uppercase;
+  transition: opacity 0.25s, transform 0.25s;
+  transform: translate(-50%, 100%);
+  opacity: 0;
+  font-size: 0.5em;
+}

services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less

@@ -1,40 +1,42 @@
 .project-list-sidebar-wrapper {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .project-list-sidebar {
-	flex-grow: 1;
-	height: 100%;
-	padding-left: 15px;
-	padding-right: 15px;
+  flex-grow: 1;
+  height: 100%;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 .project-list-sidebar-v2-pane {
-	flex-grow: 0;
-	flex-shrink: 0;
-	text-align: center;
-	background-color: @v2-dash-pane-bg;
-	color: @v2-dash-pane-color;
-	font-size: 13px;
-	padding: @line-height-computed / 2;
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-align: center;
+  background-color: @v2-dash-pane-bg;
+  color: @v2-dash-pane-color;
+  font-size: 13px;
+  padding: @line-height-computed / 2;
 }
 
-	.project-list-sidebar-v2-pane a {
-		color: @v2-dash-pane-link-color;
-		text-decoration: underline;
-	}
+.project-list-sidebar-v2-pane a {
+  color: @v2-dash-pane-link-color;
+  text-decoration: underline;
+}
 
-	.project-list-sidebar-v2-pane a:hover {
-		text-decoration: none;
-	}
+.project-list-sidebar-v2-pane a:hover {
+  text-decoration: none;
+}
 
-		.project-list-sidebar-v2-pane-toggle {
-			color: @v2-dash-pane-toggle-color;
-			padding: 0;
-			line-height: 1;
-			&:hover, &:active, &:focus {
-				color: @v2-dash-pane-toggle-color;
-			}
-		}
+.project-list-sidebar-v2-pane-toggle {
+  color: @v2-dash-pane-toggle-color;
+  padding: 0;
+  line-height: 1;
+  &:hover,
+  &:active,
+  &:focus {
+    color: @v2-dash-pane-toggle-color;
+  }
+}

services/web/frontend/stylesheets/app/sprites.less

@@ -1,4 +1,3 @@
-
 .sprite-icon {
   background-image: url('/img/sprite.png');
 }

services/web/frontend/stylesheets/app/subscription.less

@@ -1,91 +1,91 @@
 .form-helper {
-	display: inline-block;
-	width: 1.3em;
-	height: 1.3em;
-	line-height: 1.3;
-	vertical-align: initial;
-	background-color: @gray;
-	color: #FFF;
-	font-weight: bolder;
-	border-radius: 50%;
-
-	&:hover,
-	&:focus {
-		color: #FFF;
-		text-decoration: none;
-	}
+  display: inline-block;
+  width: 1.3em;
+  height: 1.3em;
+  line-height: 1.3;
+  vertical-align: initial;
+  background-color: @gray;
+  color: #fff;
+  font-weight: bolder;
+  border-radius: 50%;
+
+  &:hover,
+  &:focus {
+    color: #fff;
+    text-decoration: none;
+  }
 }
 
 .price-breakdown {
-	text-align: center;
-	margin-bottom: -10px;
+  text-align: center;
+  margin-bottom: -10px;
 }
 
 .input-feedback-message {
-	display: none;
-	font-size: 0.8em;
+  display: none;
+  font-size: 0.8em;
 
-	.has-error & {
-		display: inline-block;
-	}
+  .has-error & {
+    display: inline-block;
+  }
 }
 
 .payment-submit {
-	padding-top: (@line-height-computed / 2);
+  padding-top: (@line-height-computed / 2);
 }
 
 .payment-method-toggle {
-	margin-bottom: (@line-height-computed / 2);
-
-	&-switch {
-		display: inline-block;
-		width: 50%;
-		text-align: center;
-		border: solid 1px @gray-lighter;
-		border-radius: @border-radius-large 0 0 @border-radius-large;
-		padding: (@line-height-computed / 2);
-		color: @btn-switch-color;
-
-		&:hover,
-		&:focus {
-			color: @btn-switch-color;
-			text-decoration: none;
-		}
-
-		&:hover {
-			color: @btn-switch-hover-color;
-		}
-
-		& + & {
-			border-left-width: 0;
-			border-radius: 0 @border-radius-large @border-radius-large 0;
-		}
-
-		&-selected {
-			color: @link-active-color;
-			box-shadow: inset 0 -2px 0 0;
-
-			&:hover,
-			&:focus {
-				color: @link-active-color;
-			}
-		}
-	}
+  margin-bottom: (@line-height-computed / 2);
+
+  &-switch {
+    display: inline-block;
+    width: 50%;
+    text-align: center;
+    border: solid 1px @gray-lighter;
+    border-radius: @border-radius-large 0 0 @border-radius-large;
+    padding: (@line-height-computed / 2);
+    color: @btn-switch-color;
+
+    &:hover,
+    &:focus {
+      color: @btn-switch-color;
+      text-decoration: none;
+    }
+
+    &:hover {
+      color: @btn-switch-hover-color;
+    }
+
+    & + & {
+      border-left-width: 0;
+      border-radius: 0 @border-radius-large @border-radius-large 0;
+    }
+
+    &-selected {
+      color: @link-active-color;
+      box-shadow: inset 0 -2px 0 0;
+
+      &:hover,
+      &:focus {
+        color: @link-active-color;
+      }
+    }
+  }
 }
 
 .team-invite .message {
-	margin: 3em 0;
+  margin: 3em 0;
 }
 
 .capitalised {
-	text-transform:capitalize;
+  text-transform: capitalize;
 }
 
 .three-d-secure-container {
   > .three-d-secure-recurly-container {
     height: 400px;
 
-    > div[data-recurly="three-d-secure-container"] {
+    > div[data-recurly='three-d-secure-container'] {
       height: 100%;
     }
   }

services/web/frontend/stylesheets/app/templates-v2.less

@@ -1,203 +1,203 @@
 .template-title {
-	margin-bottom: @margin-xl;
+  margin-bottom: @margin-xl;
 }
 
 .field-title {
-	font-weight: bold;
+  font-weight: bold;
 }
 
 .filters {
-	float: right;
-	margin-bottom: @margin-lg;
+  float: right;
+  margin-bottom: @margin-lg;
 
-	@media (max-width: @screen-md-min) {
-		float: none;
-	}
+  @media (max-width: @screen-md-min) {
+    float: none;
+  }
 }
 
 .cta-links {
-	.cta-link.btn {
-		margin: 0 @margin-sm @margin-sm 0;
-	}
+  .cta-link.btn {
+    margin: 0 @margin-sm @margin-sm 0;
+  }
 }
 
 .popular-tags {
-	.template-thumbnail {
-		margin: 0 0 1em 0!important;
-	}
+  .template-thumbnail {
+    margin: 0 0 1em 0 !important;
+  }
 }
 
 .tag-link {
-	margin: 0 @margin-xs @margin-sm 0;
-	max-width: 100%;
-	white-space: inherit;
+  margin: 0 @margin-xs @margin-sm 0;
+  max-width: 100%;
+  white-space: inherit;
 }
 
 .template-abstract {
-	word-break: break-word;
-	hyphens: auto;
-	a {
-		hyphens: none;
-	}
+  word-break: break-word;
+  hyphens: auto;
+  a {
+    hyphens: none;
+  }
 }
 
 .template-thumbnail {
-	display: inline-block;
-	margin: 0 0 2em;
-	width: 100%;
-
-	.thumbnail {
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		margin: 0 0 @margin-sm 0;
-		padding:0px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		overflow: hidden;
-		width: 100%;
-
-		h3 {
-			color:@link-color;
-			margin: 10px 0px 10px 20px;
-		}
-
-		&.thumbnail-tag {
-			height: 100px;
-		}
-	}
-
-	.caption {
-		// Override ShareLatex template styles
-		background: none;
-		border: none;
-		text-align: center;
-	}
-
-	.caption__description {
-		font-style: italic;
-		padding: 0 0 5px 0;
-		.text-overflow();
-	}
-
-	.caption__title {
-		display: inline-block;
-		width: 100%;
-		text-align: center;
-		.text-overflow();
-	}
+  display: inline-block;
+  margin: 0 0 2em;
+  width: 100%;
+
+  .thumbnail {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin: 0 0 @margin-sm 0;
+    padding: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+
+    h3 {
+      color: @link-color;
+      margin: 10px 0px 10px 20px;
+    }
+
+    &.thumbnail-tag {
+      height: 100px;
+    }
+  }
+
+  .caption {
+    // Override ShareLatex template styles
+    background: none;
+    border: none;
+    text-align: center;
+  }
+
+  .caption__description {
+    font-style: italic;
+    padding: 0 0 5px 0;
+    .text-overflow();
+  }
+
+  .caption__title {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    .text-overflow();
+  }
 }
 
 .template-large-pdf-preview {
-	border: solid 1px @gray-lightest;
-	margin-top: @margin-lg;
+  border: solid 1px @gray-lightest;
+  margin-top: @margin-lg;
 }
 
 /* Media Queries */
 @media (max-width: @screen-xs-max) {
-	.templates-container {
-		column-count: 2;
-		column-gap: 2em;
-	}
+  .templates-container {
+    column-count: 2;
+    column-gap: 2em;
+  }
 }
 @media (min-width: @screen-sm-min) {
-	.templates-container {
-		&.use-column {
-			column-count: 3;
-			column-gap: 3em;	
-		}
-		&.use-percent {
-			margin: 0 -1.5em;
-			.template-thumbnail {
-				width: 33.3333333%;
-				padding: 0 1.5em;
-			}
-		}
-	}
+  .templates-container {
+    &.use-column {
+      column-count: 3;
+      column-gap: 3em;
+    }
+    &.use-percent {
+      margin: 0 -1.5em;
+      .template-thumbnail {
+        width: 33.3333333%;
+        padding: 0 1.5em;
+      }
+    }
+  }
 }
 @media (min-width: @screen-md-min) {
-	.template-large-pdf-preview {
-		margin-top: 0;
-	}
+  .template-large-pdf-preview {
+    margin-top: 0;
+  }
 }
 
 .section-tags {
-	margin-bottom: @margin-xl;
-	margin-top: @margin-md;
+  margin-bottom: @margin-xl;
+  margin-top: @margin-md;
 }
 
 .search__container--addsearch {
-	.search__input-bar {
-		display: flex;
-	}
-
-	.search__input {
-		flex: 1;
-		margin-right: 10px;
-		padding: 0 10px;
-	}
-
-	// AddSearch overrides
-	#addsearch-results {
-		min-height: 0 !important;
-
-		.addsearch-result-item-container {
-			background-size: auto 80px !important; // Resize image to be smaller
-			padding: 10px;
-			margin-left: 10px;
-			margin-right: 10px;
-			border-bottom: 2px solid rgb(236, 236, 236);
-		}
-
-		.addsearch-result-item-sub {
-			min-height: 0 !important;
-			background: none !important;
-			border-bottom: none !important;
-
-			h2 {
-				font-family: @font-family-sans-serif;
-			}
-
-			// Unfortunately AddSearch doesn't add very useful classes, so have to use
-			// some horrible nesting :/
-			& > div {
-				min-height: 0 !important;
-				padding-left: 90px !important;
-
-				// Hide some unnecessary metadata
-				span {
-					display: none !important;
-				}
-			}
-
-			a {
-				color: @ol-green !important;
-			}
-
-			&:hover a {
-				color: @ol-dark-green !important;
-			}
-		}
-	}
-
-	#addsearch-results-bottom {
-		height: auto !important;
-		background: none !important;
-		padding-top: 0 !important;
-
-		#addsearch-rp-paging {
-			margin-bottom: 10px;
-
-			a {
-				color: @ol-green !important;
-
-				&.currentResultPage {
-					color: @ol-blue-gray-5 !important;
-				}
-			}
-		}
-	}
-
-	#addsearch-logo {
-		display: none !important;
-	}
+  .search__input-bar {
+    display: flex;
+  }
+
+  .search__input {
+    flex: 1;
+    margin-right: 10px;
+    padding: 0 10px;
+  }
+
+  // AddSearch overrides
+  #addsearch-results {
+    min-height: 0 !important;
+
+    .addsearch-result-item-container {
+      background-size: auto 80px !important; // Resize image to be smaller
+      padding: 10px;
+      margin-left: 10px;
+      margin-right: 10px;
+      border-bottom: 2px solid rgb(236, 236, 236);
+    }
+
+    .addsearch-result-item-sub {
+      min-height: 0 !important;
+      background: none !important;
+      border-bottom: none !important;
+
+      h2 {
+        font-family: @font-family-sans-serif;
+      }
+
+      // Unfortunately AddSearch doesn't add very useful classes, so have to use
+      // some horrible nesting :/
+      & > div {
+        min-height: 0 !important;
+        padding-left: 90px !important;
+
+        // Hide some unnecessary metadata
+        span {
+          display: none !important;
+        }
+      }
+
+      a {
+        color: @ol-green !important;
+      }
+
+      &:hover a {
+        color: @ol-dark-green !important;
+      }
+    }
+  }
+
+  #addsearch-results-bottom {
+    height: auto !important;
+    background: none !important;
+    padding-top: 0 !important;
+
+    #addsearch-rp-paging {
+      margin-bottom: 10px;
+
+      a {
+        color: @ol-green !important;
+
+        &.currentResultPage {
+          color: @ol-blue-gray-5 !important;
+        }
+      }
+    }
+  }
+
+  #addsearch-logo {
+    display: none !important;
+  }
 }

services/web/frontend/stylesheets/app/templates.less

@@ -1,69 +1,69 @@
 .template-page-header {
-	padding-top: unit(@line-height-base,rem);
-	h1, h2 {
-		margin-top: 6px;
-		margin-right: @line-height-base * 5;
-		line-height: 1;
-	}
+  padding-top: unit(@line-height-base, rem);
+  h1,
+  h2 {
+    margin-top: 6px;
+    margin-right: @line-height-base * 5;
+    line-height: 1;
+  }
 }
 
 .template-thumbnail {
+  .thumbnail {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    img {
+      width: 100%;
+    }
+  }
 
-	.thumbnail {
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);	
-	    -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
-		img {
-			width: 100%;
-		}
-	}
-
-	a {
-		padding:0px;
-		h3 {
-			color:@link-color;
-			margin: 10px 0px 10px 20px;
-		}
-	}
-
-	.caption {
-		background: lighten(@gray-lightest, 3%);
-		border-top: 1px solid #ddd;
-	}
+  a {
+    padding: 0px;
+    h3 {
+      color: @link-color;
+      margin: 10px 0px 10px 20px;
+    }
+  }
 
+  .caption {
+    background: lighten(@gray-lightest, 3%);
+    border-top: 1px solid #ddd;
+  }
 }
 
 .template-section-header:extend(.page-header) {
-	margin-top: 0px;
+  margin-top: 0px;
 }
 
-.download-buttons, .social_buttons {
-	padding-top: 20px;
+.download-buttons,
+.social_buttons {
+  padding-top: 20px;
 }
 
 .sample-template {
-	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .template-details-section {
-	padding-bottom: 20px;
+  padding-bottom: 20px;
   .btn {
-		margin-left: 6px;
+    margin-left: 6px;
   }
 }
 
 .searchResult {
-	h1 {
-		color:@link-color;
-	}
-	img {
-		max-width: 100%;
-		height: auto;
-	}
+  h1 {
+    color: @link-color;
+  }
+  img {
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 .template-large-pdf-preview {
-	img {
-		max-width: 100%;
-	}
-}
+  img {
+    max-width: 100%;
+  }
+}

services/web/frontend/stylesheets/app/translations.less

@@ -1,23 +1,23 @@
 .translations-message {
-    .system-message;
-	text-align:center;
-    img {
-    	vertical-align: text-bottom;
-        margin-bottom: -1px;
-    }
+  .system-message;
+  text-align: center;
+  img {
+    vertical-align: text-bottom;
+    margin-bottom: -1px;
+  }
 }
 
 .translations-message when (@is-overleaf = true) {
-	.close {
-		color: #FFF;
-		opacity: 1;
-		text-shadow: none;
-	}
-	a {
-		color: #FFF;
-		&:hover,
-		&:focus {
-			color: #FFF;
-		}
-	}
+  .close {
+    color: #fff;
+    opacity: 1;
+    text-shadow: none;
+  }
+  a {
+    color: #fff;
+    &:hover,
+    &:focus {
+      color: #fff;
+    }
+  }
 }

services/web/frontend/stylesheets/app/v1-badge.less

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

services/web/frontend/stylesheets/app/wiki.less

@@ -1,95 +1,101 @@
 .wiki {
-	.contents {
-		ul {
-			padding: 0;
-			li {
-				font-size: 14px;
-				list-style: none;
-				margin-bottom: 6px;
-			}
-		}
-		
-		h2 {
-			font-size: 18px;
-		}
-	}
+  .contents {
+    ul {
+      padding: 0;
+      li {
+        font-size: 14px;
+        list-style: none;
+        margin-bottom: 6px;
+      }
+    }
 
-	img {
-		height: auto;
-		max-width: 100%;
-	}
-	
-	.page-header {
-		a {
-			font-size: 0.8em;
-			line-height: 1;
-		}
-	}
-	
-	.editsection {
-		display: none;
-	}
-	
-	table {
-		th, td {
-			padding: (@line-height-computed / 4) (@line-height-computed / 2);
-			border-bottom: 1px solid @gray-lighter;
-		}
-		th {
-			font-weight: 700;
-			text-align: left;
-			font-family: @font-family-serif;
-		}
-		margin-bottom: @line-height-computed / 2;
-	}
-	.table-no-borders {
-		th, td {
-			border: 0px;
-		}
-	}
-	
-	.example {
-		max-width: 100%;
+    h2 {
+      font-size: 18px;
+    }
+  }
 
-		.code {
-			pre {
-				background-color: @gray-lightest;
-				border-radius: 6px;
-				padding: (@line-height-computed / 2);
-				white-space: pre-wrap;
-				margin: 0;
-			}
-		}
-		.output {
-			text-align: center;
-			padding-top: 10px;
-			
-			img {
-				width: auto;
-				height: auto;
-				max-width: 100%;
-				box-shadow: 0 1px 3px @gray-light;
-				border-radius: 6px;
-			}
-		}
-	}
-	@media (min-width: 1360px) {
-		.example {
-			margin-right: -200px;
-		}
-	}
-	@media (max-width: @screen-sm) {
-		.contents {
-			margin-top: @margin-lg;
-		}
-	}
-	
-	/*<![CDATA[*/
-	.source-latex {line-height: normal;}
-	.source-latex li, .source-latex pre {
-		line-height: normal; border: 0px none white;
-	}
-	/**
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  .page-header {
+    a {
+      font-size: 0.8em;
+      line-height: 1;
+    }
+  }
+
+  .editsection {
+    display: none;
+  }
+
+  table {
+    th,
+    td {
+      padding: (@line-height-computed / 4) (@line-height-computed / 2);
+      border-bottom: 1px solid @gray-lighter;
+    }
+    th {
+      font-weight: 700;
+      text-align: left;
+      font-family: @font-family-serif;
+    }
+    margin-bottom: @line-height-computed / 2;
+  }
+  .table-no-borders {
+    th,
+    td {
+      border: 0px;
+    }
+  }
+
+  .example {
+    max-width: 100%;
+
+    .code {
+      pre {
+        background-color: @gray-lightest;
+        border-radius: 6px;
+        padding: (@line-height-computed / 2);
+        white-space: pre-wrap;
+        margin: 0;
+      }
+    }
+    .output {
+      text-align: center;
+      padding-top: 10px;
+
+      img {
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        box-shadow: 0 1px 3px @gray-light;
+        border-radius: 6px;
+      }
+    }
+  }
+  @media (min-width: 1360px) {
+    .example {
+      margin-right: -200px;
+    }
+  }
+  @media (max-width: @screen-sm) {
+    .contents {
+      margin-top: @margin-lg;
+    }
+  }
+
+  /*<![CDATA[*/
+  .source-latex {
+    line-height: normal;
+  }
+  .source-latex li,
+  .source-latex pre {
+    line-height: normal;
+    border: 0px none white;
+  }
+  /**
 	 * GeSHi Dynamically Generated Stylesheet
 	 * --------------------------------------
 	 * Dynamically generated stylesheet for latex
@@ -98,53 +104,123 @@
 	 * (http://qbnz.com/highlighter/ and http://geshi.org/)
 	 * --------------------------------------
 	 */
-	.latex.source-latex .imp {font-weight: bold; color: red;}
-	.latex.source-latex li, .latex.source-latex .li1 {font-weight: normal; vertical-align:top;}
-	.latex.source-latex .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
-	.latex.source-latex .li2 {font-weight: bold; vertical-align:top;}
-	.latex.source-latex .kw1 {color: #800000;}
-	.latex.source-latex .co1 {color: #2C922C; font-style: italic;}
-	.latex.source-latex .es0 {color: #000000; font-weight: bold;}
-	.latex.source-latex .sy0 {color: #E02020; }
-	.latex.source-latex .st0 {color: #000000;}
-	.latex.source-latex .re1 {color: #8020E0; font-weight: normal;}
-	.latex.source-latex .re2 {color: #C08020; font-weight: normal;}
-	.latex.source-latex .re3 {color: #8020E0; font-weight: normal;}
-	.latex.source-latex .re4 {color: #800000; font-weight: normal;}
-	.latex.source-latex .re5 {color: #00008B; font-weight: bold;}
-	.latex.source-latex .re6 {color: #800000; font-weight: normal;}
-	.latex.source-latex .re7 {color: #0000D0; font-weight: normal;}
-	.latex.source-latex .re8 {color: #C00000; font-weight: normal;}
-	.latex.source-latex .re9 {color: #2020C0; font-weight: normal;}
-	.latex.source-latex .re10 {color: #800000; font-weight: normal;}
-	.latex.source-latex .re11 {color: #E00000; font-weight: normal;}
-	.latex.source-latex .re12 {color: #800000; font-weight: normal;}
-	.latex.source-latex .ln-xtra, .latex.source-latex li.ln-xtra, .latex.source-latex div.ln-xtra {background-color: #ffc;}
-	.latex.source-latex span.xtra { display:block; }
+  .latex.source-latex .imp {
+    font-weight: bold;
+    color: red;
+  }
+  .latex.source-latex li,
+  .latex.source-latex .li1 {
+    font-weight: normal;
+    vertical-align: top;
+  }
+  .latex.source-latex .ln {
+    width: 1px;
+    text-align: right;
+    margin: 0;
+    padding: 0 2px;
+    vertical-align: top;
+  }
+  .latex.source-latex .li2 {
+    font-weight: bold;
+    vertical-align: top;
+  }
+  .latex.source-latex .kw1 {
+    color: #800000;
+  }
+  .latex.source-latex .co1 {
+    color: #2c922c;
+    font-style: italic;
+  }
+  .latex.source-latex .es0 {
+    color: #000000;
+    font-weight: bold;
+  }
+  .latex.source-latex .sy0 {
+    color: #e02020;
+  }
+  .latex.source-latex .st0 {
+    color: #000000;
+  }
+  .latex.source-latex .re1 {
+    color: #8020e0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re2 {
+    color: #c08020;
+    font-weight: normal;
+  }
+  .latex.source-latex .re3 {
+    color: #8020e0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re4 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re5 {
+    color: #00008b;
+    font-weight: bold;
+  }
+  .latex.source-latex .re6 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re7 {
+    color: #0000d0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re8 {
+    color: #c00000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re9 {
+    color: #2020c0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re10 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re11 {
+    color: #e00000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re12 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .ln-xtra,
+  .latex.source-latex li.ln-xtra,
+  .latex.source-latex div.ln-xtra {
+    background-color: #ffc;
+  }
+  .latex.source-latex span.xtra {
+    display: block;
+  }
 
-	/*]]>*/
+  /*]]>*/
 
-	a.search-result {
-		display: block;
-		margin-top: @line-height-computed / 2;
-		.search-result-content {
-			margin-top: @line-height-computed / 4;
-			white-space: pre-wrap;
-			font-size: 0.8em;
-			color: @gray-dark;
-			em {
-				font-weight: bold;
-			}
-		}
-		
-		&:hover, &:active, &:focus {
-			text-decoration: none;
-			.search-result-content {
-				color: @gray-darker;
-				
-			}
-			box-shadow: 0 2px 4px rgba(0,0,0,0.35);
-		}
-	}
+  a.search-result {
+    display: block;
+    margin-top: @line-height-computed / 2;
+    .search-result-content {
+      margin-top: @line-height-computed / 4;
+      white-space: pre-wrap;
+      font-size: 0.8em;
+      color: @gray-dark;
+      em {
+        font-weight: bold;
+      }
+    }
 
-}
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+      .search-result-content {
+        color: @gray-darker;
+      }
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
+    }
+  }
+}

services/web/frontend/stylesheets/components/alerts.less

@@ -2,7 +2,6 @@
 // Alerts
 // --------------------------------------------------
 
-
 // Base styles
 // -------------------------
 
@@ -38,7 +37,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissable {
- padding-right: (@alert-padding + 20);
+  padding-right: (@alert-padding + 20);
 
   // Adjust close link position
   .close {
@@ -78,4 +77,4 @@
   .btn {
     text-decoration: none;
   }
-}
+}

services/web/frontend/stylesheets/components/badges.less

@@ -2,7 +2,6 @@
 // Badges
 // --------------------------------------------------
 
-
 // Base classes
 .badge {
   display: inline-block;

services/web/frontend/stylesheets/components/breadcrumbs.less

@@ -2,7 +2,6 @@
 // Breadcrumbs
 // --------------------------------------------------
 
-
 .breadcrumb {
   padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
   margin-bottom: @line-height-computed;
@@ -14,7 +13,7 @@
     display: inline-block;
 
     + li:before {
-      content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
+      content: '@{breadcrumb-separator}\00a0'; // Unicode space added since inline-block means non-collapsing white-space
       padding: 0 5px;
       color: @breadcrumb-color;
     }

services/web/frontend/stylesheets/components/button-groups.less

@@ -91,15 +91,19 @@
   outline: 0;
 }
 
-
 // Sizing
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-xs > .btn { &:extend(.btn-xs); }
-.btn-group-sm > .btn { &:extend(.btn-sm); }
-.btn-group-lg > .btn { &:extend(.btn-lg); }
-
+.btn-group-xs > .btn {
+  &:extend(.btn-xs);
+}
+.btn-group-sm > .btn {
+  &:extend(.btn-sm);
+}
+.btn-group-lg > .btn {
+  &:extend(.btn-lg);
+}
 
 // Split button dropdowns
 // ----------------------
@@ -117,7 +121,7 @@
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {
-  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
 
   // Show no shadow for `.btn-link` since it has no other button styles.
   &.btn-link {
@@ -125,7 +129,6 @@
   }
 }
 
-
 // Reposition the caret
 .btn .caret {
   margin-left: 0;
@@ -140,7 +143,6 @@
   border-width: 0 @caret-width-large @caret-width-large;
 }
 
-
 // Vertical button groups
 // ----------------------
 
@@ -193,12 +195,12 @@
     .border-bottom-radius(0);
   }
 }
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+.btn-group-vertical
+  > .btn-group:last-child:not(:first-child)
+  > .btn:first-child {
   .border-top-radius(0);
 }
 
-
-
 // Justified button groups
 // ----------------------
 
@@ -218,9 +220,8 @@
   }
 }
 
-
 // Checkbox and radio options
-[data-toggle="buttons"] > .btn > input[type="radio"],
-[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+[data-toggle='buttons'] > .btn > input[type='radio'],
+[data-toggle='buttons'] > .btn > input[type='checkbox'] {
   display: none;
 }

services/web/frontend/stylesheets/components/buttons.less

@@ -2,7 +2,6 @@
 // Buttons
 // --------------------------------------------------
 
-
 // Base styles
 // --------------------------------------------------
 
@@ -17,7 +16,10 @@
   border: @btn-border-width solid transparent;
   border-bottom: @btn-border-bottom-width solid transparent;
   white-space: nowrap;
-  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
+  .button-size(
+    @padding-base-vertical; @padding-base-horizontal; @font-size-base;
+      @line-height-base; @btn-border-radius-base
+  );
   .user-select(none);
 
   &,
@@ -38,7 +40,7 @@
   &.active {
     outline: 0;
     background-image: none;
-    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
   }
 
   &.disabled,
@@ -46,12 +48,11 @@
   fieldset[disabled] & {
     cursor: not-allowed;
     pointer-events: none; // Future-proof disabling of clicks
-    .opacity(.65);
+    .opacity(0.65);
     .box-shadow(none);
   }
 }
 
-
 // Alternate buttons
 // --------------------------------------------------
 
@@ -81,7 +82,6 @@
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
 
-
 // Link buttons
 // -------------------------
 
@@ -132,22 +132,33 @@
 // --------------------------------------------------
 
 .btn-xl {
-  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-h2; @line-height-large; @btn-border-radius-large);
+  .button-size(
+    @padding-large-vertical; @padding-large-horizontal; @font-size-h2;
+      @line-height-large; @btn-border-radius-large
+  );
 }
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
+  .button-size(
+    @padding-large-vertical; @padding-large-horizontal; @font-size-large;
+      @line-height-large; @btn-border-radius-large
+  );
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+  .button-size(
+    @padding-small-vertical; @padding-small-horizontal; @font-size-small;
+      @line-height-small; @btn-border-radius-small
+  );
 }
 .btn-xs {
-  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+  .button-size(
+    @padding-xs-vertical; @padding-xs-horizontal; @font-size-small;
+      @line-height-small; @btn-border-radius-small
+  );
 }
 
-
 // Block button
 // --------------------------------------------------
 
@@ -164,9 +175,9 @@
 }
 
 // Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
   &.btn-block {
     width: 100%;
   }

services/web/frontend/stylesheets/components/card.less

@@ -4,22 +4,24 @@
   box-shadow: @card-box-shadow;
   padding: @line-height-computed;
   .page-header {
-  	margin: 0 0 1.5625rem;
-  	h1, h2, h3 {
-  		margin-top: 0;
-  	}
+    margin: 0 0 1.5625rem;
+    h1,
+    h2,
+    h3 {
+      margin-top: 0;
+    }
   }
   > .container-fluid {
     padding: 0;
   }
 
   .card-header {
-      border-bottom: 1px solid @gray-lighter;
-      padding-bottom: @line-height-computed;
-      margin-bottom: @line-height-computed;
-      h2 {
-          margin: 0;
-      }
+    border-bottom: 1px solid @gray-lighter;
+    padding-bottom: @line-height-computed;
+    margin-bottom: @line-height-computed;
+    h2 {
+      margin: 0;
+    }
   }
 
   > :first-child {
@@ -31,29 +33,29 @@
 }
 
 .card-thin {
-  padding: @line-height-computed / 2
+  padding: @line-height-computed / 2;
 }
 
 .card-group {
-    .card {
-        margin: @line-height-computed -15px 0 -15px;
-        border-radius: 0;
+  .card {
+    margin: @line-height-computed -15px 0 -15px;
+    border-radius: 0;
 
-        &.card-highlighted {
-            // Make it taller and card like
-            margin-top: 0;
-            border-radius: @border-radius-base;
-        }
+    &.card-highlighted {
+      // Make it taller and card like
+      margin-top: 0;
+      border-radius: @border-radius-base;
+    }
 
-        &.card-first {
-            border-top-left-radius: @border-radius-base;
-            border-bottom-left-radius: @border-radius-base;
-        }
-        &.card-last {
-            border-top-right-radius: @border-radius-base;
-            border-bottom-right-radius: @border-radius-base;
-        }
+    &.card-first {
+      border-top-left-radius: @border-radius-base;
+      border-bottom-left-radius: @border-radius-base;
     }
+    &.card-last {
+      border-top-right-radius: @border-radius-base;
+      border-bottom-right-radius: @border-radius-base;
+    }
+  }
 }
 
 .card-border {

services/web/frontend/stylesheets/components/carousel.less

@@ -2,7 +2,6 @@
 // Carousel
 // --------------------------------------------------
 
-
 // Wrapper for the slide container and indicators
 .carousel {
   position: relative;
@@ -16,7 +15,7 @@
   > .item {
     display: none;
     position: relative;
-    .transition(.6s ease-in-out left);
+    .transition(0.6s ease-in-out left);
 
     // Account for jankitude on images
     > img,
@@ -28,7 +27,9 @@
 
   > .active,
   > .next,
-  > .prev { display: block; }
+  > .prev {
+    display: block;
+  }
 
   > .active {
     left: 0;
@@ -58,7 +59,6 @@
   > .active.right {
     left: 100%;
   }
-
 }
 
 // Left/right controls for nav
@@ -80,12 +80,18 @@
 
   // Set gradients for backgrounds
   &.left {
-    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
+    #gradient >
+      .horizontal(
+        @start-color: rgba(0, 0, 0, 0.5) ; @end-color: rgba(0, 0, 0, 0.0001)
+      );
   }
   &.right {
     left: auto;
     right: 0;
-    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
+    #gradient >
+      .horizontal(
+        @start-color: rgba(0, 0, 0, 0.0001) ; @end-color: rgba(0, 0, 0, 0.5)
+      );
   }
 
   // Hover/focus state
@@ -94,7 +100,7 @@
     outline: none;
     color: @carousel-control-color;
     text-decoration: none;
-    .opacity(.9);
+    .opacity(0.9);
   }
 
   // Toggles
@@ -117,7 +123,7 @@
   }
   .icon-prev,
   .icon-next {
-    width:  20px;
+    width: 20px;
     height: 20px;
     margin-top: -10px;
     margin-left: -10px;
@@ -126,12 +132,12 @@
 
   .icon-prev {
     &:before {
-      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
+      content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
     }
   }
   .icon-next {
     &:before {
-      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
+      content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
     }
   }
 }
@@ -154,7 +160,7 @@
 
   li {
     display: inline-block;
-    width:  10px;
+    width: 10px;
     height: 10px;
     margin: 1px;
     text-indent: -999px;
@@ -171,11 +177,11 @@
     // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
     // set alpha transparency for the best results possible.
     background-color: #000 \9; // IE8
-    background-color: rgba(0,0,0,0); // IE9
+    background-color: rgba(0, 0, 0, 0); // IE9
   }
   .active {
     margin: 0;
-    width:  12px;
+    width: 12px;
     height: 12px;
     background-color: @carousel-indicator-active-bg;
   }
@@ -200,10 +206,8 @@
   }
 }
 
-
 // Scale up controls for tablets and up
 @media screen and (min-width: @screen-sm-min) {
-
   // Scale up the controls a smidge
   .carousel-control {
     .glyphicon-chevron-left,

services/web/frontend/stylesheets/components/close.less

@@ -2,7 +2,6 @@
 // Close icons
 // --------------------------------------------------
 
-
 .close {
   float: right;
   font-size: (@font-size-base * 1.5);
@@ -10,14 +9,14 @@
   line-height: 1;
   color: @close-color;
   text-shadow: @close-text-shadow;
-  .opacity(.4);
+  .opacity(0.4);
 
   &:hover,
   &:focus {
     color: @close-color;
     text-decoration: none;
     cursor: pointer;
-    .opacity(.5);
+    .opacity(0.5);
   }
 
   // Additional properties for button version

services/web/frontend/stylesheets/components/code.less

@@ -2,7 +2,6 @@
 // Code (inline and block)
 // --------------------------------------------------
 
-
 // Inline and block code styles
 code,
 kbd,
@@ -28,7 +27,7 @@ kbd {
   color: @kbd-color;
   background-color: @kbd-bg;
   border-radius: @border-radius-small;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
 // Blocks of code

services/web/frontend/stylesheets/components/component-animations.less

@@ -9,7 +9,7 @@
 
 .fade {
   opacity: 0;
-  .transition(opacity .15s linear);
+  .transition(opacity 0.15s linear);
   &.in {
     opacity: 1;
   }
@@ -25,5 +25,5 @@
   position: relative;
   height: 0;
   overflow: hidden;
-  .transition(height .35s ease);
+  .transition(height 0.35s ease);
 }

services/web/frontend/stylesheets/components/daterange-picker.less

@@ -14,61 +14,60 @@
 // Settings
 
 // The class name to contain everything within.
-@arrow-size:     7px;
+@arrow-size: 7px;
 
 //
 // Colors
-@daterangepicker-color:                      @brand-primary;
-@daterangepicker-bg-color:                   #fff;
+@daterangepicker-color: @brand-primary;
+@daterangepicker-bg-color: #fff;
 
-@daterangepicker-cell-color:                 @daterangepicker-color;
-@daterangepicker-cell-border-color:          transparent;
-@daterangepicker-cell-bg-color:              @daterangepicker-bg-color;
+@daterangepicker-cell-color: @daterangepicker-color;
+@daterangepicker-cell-border-color: transparent;
+@daterangepicker-cell-bg-color: @daterangepicker-bg-color;
 
-@daterangepicker-cell-hover-color:           @daterangepicker-color;
-@daterangepicker-cell-hover-border-color:    @daterangepicker-cell-border-color;
-@daterangepicker-cell-hover-bg-color:        #eee;
+@daterangepicker-cell-hover-color: @daterangepicker-color;
+@daterangepicker-cell-hover-border-color: @daterangepicker-cell-border-color;
+@daterangepicker-cell-hover-bg-color: #eee;
 
-@daterangepicker-in-range-color:             #000;
-@daterangepicker-in-range-border-color:      transparent;
-@daterangepicker-in-range-bg-color:          #ebf4f8;
+@daterangepicker-in-range-color: #000;
+@daterangepicker-in-range-border-color: transparent;
+@daterangepicker-in-range-bg-color: #ebf4f8;
 
-@daterangepicker-active-color:               #fff;
-@daterangepicker-active-bg-color:            #138A07;
-@daterangepicker-active-border-color:        transparent;
+@daterangepicker-active-color: #fff;
+@daterangepicker-active-bg-color: #138a07;
+@daterangepicker-active-border-color: transparent;
 
-@daterangepicker-unselected-color:           #999;
-@daterangepicker-unselected-border-color:    transparent;
-@daterangepicker-unselected-bg-color:        #fff;
+@daterangepicker-unselected-color: #999;
+@daterangepicker-unselected-border-color: transparent;
+@daterangepicker-unselected-bg-color: #fff;
 
 //
 // daterangepicker
-@daterangepicker-width:          278px;
-@daterangepicker-padding:        4px;
-@daterangepicker-z-index:        3000;
-
-@daterangepicker-border-size:    1px;
-@daterangepicker-border-color:   #ccc;
-@daterangepicker-border-radius:  4px;
+@daterangepicker-width: 278px;
+@daterangepicker-padding: 4px;
+@daterangepicker-z-index: 3000;
 
+@daterangepicker-border-size: 1px;
+@daterangepicker-border-color: #ccc;
+@daterangepicker-border-radius: 4px;
 
 //
 // Calendar
-@daterangepicker-calendar-margin:              @daterangepicker-padding;
-@daterangepicker-calendar-bg-color:            @daterangepicker-bg-color;
+@daterangepicker-calendar-margin: @daterangepicker-padding;
+@daterangepicker-calendar-bg-color: @daterangepicker-bg-color;
 
-@daterangepicker-calendar-border-size:         1px;
-@daterangepicker-calendar-border-color:        @daterangepicker-bg-color;
-@daterangepicker-calendar-border-radius:       @daterangepicker-border-radius;
+@daterangepicker-calendar-border-size: 1px;
+@daterangepicker-calendar-border-color: @daterangepicker-bg-color;
+@daterangepicker-calendar-border-radius: @daterangepicker-border-radius;
 
 //
 // Calendar Cells
-@daterangepicker-cell-size:           20px;
-@daterangepicker-cell-width:          @daterangepicker-cell-size;
-@daterangepicker-cell-height:         @daterangepicker-cell-size;
+@daterangepicker-cell-size: 20px;
+@daterangepicker-cell-width: @daterangepicker-cell-size;
+@daterangepicker-cell-height: @daterangepicker-cell-size;
 
-@daterangepicker-cell-border-radius:  @daterangepicker-calendar-border-radius;
-@daterangepicker-cell-border-size:    1px;
+@daterangepicker-cell-border-radius: @daterangepicker-calendar-border-radius;
+@daterangepicker-cell-border-size: 1px;
 
 //
 // Dropdowns
@@ -76,37 +75,37 @@
 
 //
 // Controls
-@daterangepicker-control-height:               30px;
-@daterangepicker-control-line-height:          @daterangepicker-control-height;
-@daterangepicker-control-color:                #555;
+@daterangepicker-control-height: 30px;
+@daterangepicker-control-line-height: @daterangepicker-control-height;
+@daterangepicker-control-color: #555;
 
-@daterangepicker-control-border-size:          1px;
-@daterangepicker-control-border-color:         #ccc;
-@daterangepicker-control-border-radius:        4px;
+@daterangepicker-control-border-size: 1px;
+@daterangepicker-control-border-color: #ccc;
+@daterangepicker-control-border-radius: 4px;
 
-@daterangepicker-control-active-border-size:   1px;
-@daterangepicker-control-active-border-color:  @brand-primary;
+@daterangepicker-control-active-border-size: 1px;
+@daterangepicker-control-active-border-color: @brand-primary;
 @daterangepicker-control-active-border-radius: @daterangepicker-control-border-radius;
 
-@daterangepicker-control-disabled-color:       #ccc;
+@daterangepicker-control-disabled-color: #ccc;
 
 //
 // Ranges
-@daterangepicker-ranges-color:                @brand-primary;
-@daterangepicker-ranges-bg-color:             daterangepicker-ranges-color;
+@daterangepicker-ranges-color: @brand-primary;
+@daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
 
-@daterangepicker-ranges-border-size:          1px;
-@daterangepicker-ranges-border-color:         @daterangepicker-ranges-bg-color;
-@daterangepicker-ranges-border-radius:        @daterangepicker-border-radius;
+@daterangepicker-ranges-border-size: 1px;
+@daterangepicker-ranges-border-color: @daterangepicker-ranges-bg-color;
+@daterangepicker-ranges-border-radius: @daterangepicker-border-radius;
 
-@daterangepicker-ranges-hover-color:          #fff;
-@daterangepicker-ranges-hover-bg-color:       @daterangepicker-ranges-color;
-@daterangepicker-ranges-hover-border-size:    @daterangepicker-ranges-border-size;
-@daterangepicker-ranges-hover-border-color:   @daterangepicker-ranges-hover-bg-color;
-@daterangepicker-ranges-hover-border-radius:  @daterangepicker-border-radius;
+@daterangepicker-ranges-hover-color: #fff;
+@daterangepicker-ranges-hover-bg-color: @daterangepicker-ranges-color;
+@daterangepicker-ranges-hover-border-size: @daterangepicker-ranges-border-size;
+@daterangepicker-ranges-hover-border-color: @daterangepicker-ranges-hover-bg-color;
+@daterangepicker-ranges-hover-border-radius: @daterangepicker-border-radius;
 
-@daterangepicker-ranges-active-border-size:   @daterangepicker-ranges-border-size;
-@daterangepicker-ranges-active-border-color:  @daterangepicker-ranges-bg-color;
+@daterangepicker-ranges-active-border-size: @daterangepicker-ranges-border-size;
+@daterangepicker-ranges-active-border-color: @daterangepicker-ranges-bg-color;
 @daterangepicker-ranges-active-border-radius: @daterangepicker-border-radius;
 
 //
@@ -128,7 +127,8 @@
   @arrow-prefix-size: @arrow-size;
   @arrow-suffix-size: (@arrow-size - @daterangepicker-border-size);
 
-  &:before, &:after {
+  &:before,
+  &:after {
     position: absolute;
     display: inline-block;
 
@@ -207,7 +207,7 @@
 
     &:after {
       top: initial;
-      bottom:-@arrow-suffix-size;
+      bottom: -@arrow-suffix-size;
       border-bottom: initial;
       border-top: @arrow-suffix-size solid @daterangepicker-bg-color;
     }
@@ -219,7 +219,8 @@
   }
 
   &.single {
-    .ranges, .calendar {
+    .ranges,
+    .calendar {
       float: none;
     }
   }
@@ -242,7 +243,8 @@
       }
     }
 
-    th, td {
+    th,
+    td {
       white-space: nowrap;
       text-align: center;
 
@@ -252,7 +254,8 @@
   }
 
   .calendar-table {
-    border: @daterangepicker-calendar-border-size solid @daterangepicker-calendar-border-color;
+    border: @daterangepicker-calendar-border-size solid
+      @daterangepicker-calendar-border-color;
     padding: @daterangepicker-calendar-margin;
     border-radius: @daterangepicker-calendar-border-radius;
     background-color: @daterangepicker-calendar-bg-color;
@@ -263,12 +266,14 @@
     margin: 0;
   }
 
-  td, th {
+  td,
+  th {
     text-align: center;
     width: @daterangepicker-cell-width;
     height: @daterangepicker-cell-height;
     border-radius: @daterangepicker-cell-border-radius;
-    border: @daterangepicker-cell-border-size solid @daterangepicker-cell-border-color;
+    border: @daterangepicker-cell-border-size solid
+      @daterangepicker-cell-border-color;
     white-space: nowrap;
     cursor: pointer;
 
@@ -288,7 +293,10 @@
 
   td {
     &.off {
-      &, &.in-range, &.start-date, &.end-date {
+      &,
+      &.in-range,
+      &.start-date,
+      &.end-date {
         background-color: @daterangepicker-unselected-bg-color;
         border-color: @daterangepicker-unselected-border-color;
         color: @daterangepicker-unselected-color;
@@ -307,11 +315,13 @@
     }
 
     &.start-date {
-      border-radius: @daterangepicker-cell-border-radius 0 0 @daterangepicker-cell-border-radius;
+      border-radius: @daterangepicker-cell-border-radius 0 0
+        @daterangepicker-cell-border-radius;
     }
 
     &.end-date {
-      border-radius: 0 @daterangepicker-cell-border-radius @daterangepicker-cell-border-radius 0;
+      border-radius: 0 @daterangepicker-cell-border-radius
+        @daterangepicker-cell-border-radius 0;
     }
 
     &.start-date.end-date {
@@ -319,7 +329,8 @@
     }
 
     &.active {
-      &, &:hover {
+      &,
+      &:hover {
         background-color: @daterangepicker-active-bg-color;
         border-color: @daterangepicker-active-border-color;
         color: @daterangepicker-active-color;
@@ -336,7 +347,8 @@
   //
   // Disabled Controls
   //
-  td, option {
+  td,
+  option {
     &.disabled {
       color: #999;
       cursor: not-allowed;
@@ -345,7 +357,8 @@
   }
 
   select {
-    &.monthselect, &.yearselect {
+    &.monthselect,
+    &.yearselect {
       font-size: 12px;
       padding: 1px;
       height: auto;
@@ -362,7 +375,10 @@
       width: 40%;
     }
 
-    &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
+    &.hourselect,
+    &.minuteselect,
+    &.secondselect,
+    &.ampmselect {
       width: 50px;
       margin-bottom: 0;
     }
@@ -372,7 +388,8 @@
   // Text Input Controls (above calendar)
   //
   .input-mini {
-    border: @daterangepicker-control-border-size solid @daterangepicker-control-border-color;
+    border: @daterangepicker-control-border-size solid
+      @daterangepicker-control-border-color;
     border-radius: @daterangepicker-control-border-radius;
     color: @daterangepicker-control-color;
     height: @daterangepicker-control-line-height;
@@ -386,7 +403,8 @@
     width: 100%;
 
     &.active {
-      border: @daterangepicker-control-active-border-size solid @daterangepicker-control-active-border-color;
+      border: @daterangepicker-control-active-border-size solid
+        @daterangepicker-control-active-border-color;
       border-radius: @daterangepicker-control-active-border-radius;
     }
   }
@@ -453,7 +471,8 @@
   li {
     font-size: 13px;
     background-color: @daterangepicker-ranges-bg-color;
-    border: @daterangepicker-ranges-border-size solid @daterangepicker-ranges-border-color;
+    border: @daterangepicker-ranges-border-size solid
+      @daterangepicker-ranges-border-color;
     border-radius: @daterangepicker-ranges-border-radius;
     color: @daterangepicker-ranges-color;
     padding: 3px 12px;
@@ -467,7 +486,8 @@
 
     &.active {
       background-color: @daterangepicker-ranges-hover-bg-color;
-      border: @daterangepicker-ranges-hover-border-size solid @daterangepicker-ranges-hover-border-color;
+      border: @daterangepicker-ranges-hover-border-size solid
+        @daterangepicker-ranges-hover-border-color;
       color: @daterangepicker-ranges-hover-color;
     }
   }
@@ -479,14 +499,14 @@
     .glyphicon {
       font-family: FontAwesome;
     }
-    .glyphicon-chevron-left:before{
-      content: "\f053";
+    .glyphicon-chevron-left:before {
+      content: '\f053';
     }
-    .glyphicon-chevron-right:before{
-      content: "\f054";
+    .glyphicon-chevron-right:before {
+      content: '\f054';
     }
-    .glyphicon-calendar:before{
-      content: "\f073";
+    .glyphicon-calendar:before {
+      content: '\f073';
     }
 
     width: auto;
@@ -509,13 +529,15 @@
       }
 
       &.ltr {
-        .ranges, .calendar {
-          float:left;
+        .ranges,
+        .calendar {
+          float: left;
         }
       }
       &.rtl {
-        .ranges, .calendar {
-          float:right;
+        .ranges,
+        .calendar {
+          float: right;
         }
       }
     }
@@ -523,7 +545,7 @@
     &.ltr {
       direction: ltr;
       text-align: left;
-      .calendar{
+      .calendar {
         &.left {
           clear: left;
           margin-right: 0;
@@ -554,14 +576,15 @@
         padding-right: 12px;
       }
 
-      .ranges, .calendar {
+      .ranges,
+      .calendar {
         float: left;
       }
     }
     &.rtl {
       direction: rtl;
       text-align: right;
-      .calendar{
+      .calendar {
         &.left {
           clear: right;
           margin-left: 0;
@@ -592,7 +615,8 @@
         padding-left: 12px;
       }
 
-      .ranges, .calendar {
+      .ranges,
+      .calendar {
         text-align: right;
         float: right;
       }
@@ -616,7 +640,7 @@
     &.ltr {
       .ranges {
         float: left;
-        clear: none !important
+        clear: none !important;
       }
     }
     &.rtl {

services/web/frontend/stylesheets/components/dropdowns.less

@@ -2,7 +2,6 @@
 // Dropdown menus
 // --------------------------------------------------
 
-
 // Dropdown arrow/caret
 .caret {
   display: inline-block;
@@ -10,10 +9,10 @@
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top:   @caret-width-base solid;
+  border-top: @caret-width-base solid;
   border-right: @caret-width-base solid transparent;
-  border-left:  @caret-width-base solid transparent;
-  margin-top:   -@caret-width-base/2;
+  border-left: @caret-width-base solid transparent;
+  margin-top: -@caret-width-base / 2;
 }
 
 // The dropdown wrapper (div)
@@ -43,7 +42,7 @@
   border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;
   border-radius: @border-radius-base;
-  .box-shadow(0 6px 12px rgba(0,0,0,.175));
+  .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
   background-clip: padding-box;
 
   // Aligns the dropdown menu to right
@@ -60,7 +59,9 @@
   }
 
   // Links and other items within the dropdown menu
-  > li > a,div, .dropdown-menu-button {
+  > li > a,
+  div,
+  .dropdown-menu-button {
     display: block;
     padding: @dropdown-item-padding;
     clear: both;
@@ -69,10 +70,10 @@
     color: @dropdown-link-color;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
     &.subdued {
-      color: #7a7a7a
+      color: #7a7a7a;
     }
     .subdued {
-      color: #7a7a7a
+      color: #7a7a7a;
     }
   }
 
@@ -85,7 +86,8 @@
 }
 
 // Hover/Focus state
-.dropdown-menu > li > a, .dropdown-menu .dropdown-menu-button {
+.dropdown-menu > li > a,
+.dropdown-menu .dropdown-menu-button {
   &:hover,
   &:focus {
     text-decoration: none;
@@ -200,7 +202,7 @@
   .caret {
     border-top: 0;
     border-bottom: @caret-width-base solid;
-    content: "";
+    content: '';
   }
   // Different positioning for bottom up menu
   .dropdown-menu {
@@ -210,7 +212,6 @@
   }
 }
 
-
 // Component alignment
 //
 // Reiterate per navbar.less and the modified component alignment there.
@@ -227,4 +228,3 @@
     }
   }
 }
-

services/web/frontend/stylesheets/components/embed-responsive.less

@@ -23,4 +23,4 @@
 }
 .embed-responsive-4by3 {
   padding-bottom: 75% !important;
-}
+}

services/web/frontend/stylesheets/components/footer.less

@@ -1,51 +1,50 @@
 footer.site-footer {
-	background-color: @footer-bg-color;
-	border-top: 1px solid @gray-lighter;
-	font-size: 0.9rem;
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	height: @footer-height;
-	line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling
-		
-	ul {
-		list-style: none;
-		margin: 0px;
-		li {
-			display: inline-block;
-			margin: 0 .5em;
-		}
-		i {
-			font-size: 1.2rem;
-		}
-	}
-	li.lngOption {
+  background-color: @footer-bg-color;
+  border-top: 1px solid @gray-lighter;
+  font-size: 0.9rem;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: @footer-height;
+  line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling
 
-		text-align: left;
-		display: list-item;
+  ul {
+    list-style: none;
+    margin: 0px;
+    li {
+      display: inline-block;
+      margin: 0 0.5em;
+    }
+    i {
+      font-size: 1.2rem;
+    }
+  }
+  li.lngOption {
+    text-align: left;
+    display: list-item;
 
-		img {
-			vertical-align: text-bottom;
-		}
-	}
+    img {
+      vertical-align: text-bottom;
+    }
+  }
 
-	a {
-		color: @footer-link-color;
-		&:hover,
-		&:focus {
-			color: @footer-link-hover-color;
-		}
-	}
+  a {
+    color: @footer-link-color;
+    &:hover,
+    &:focus {
+      color: @footer-link-hover-color;
+    }
+  }
 }
 
 .site-footer-content when (@is-overleaf = true) {
-	.container-fluid;
+  .container-fluid;
 }
 .site-footer-content when (@is-overleaf = false) {
-	.container;
+  .container;
 }
 
 .sprite-icon-lang {
-	display: inline-block;
-	vertical-align: middle;
-}
+  display: inline-block;
+  vertical-align: middle;
+}

services/web/frontend/stylesheets/components/forms.less

@@ -2,7 +2,6 @@
 // Forms
 // --------------------------------------------------
 
-
 // Normalize non-controls
 //
 // Restyle and baseline non-control form elements.
@@ -35,7 +34,6 @@ label {
   font-weight: bold;
 }
 
-
 // Normalize form controls
 //
 // While most of our form styles require extra classes, some basic normalization
@@ -43,25 +41,25 @@ label {
 // address browser inconsistencies.
 
 // Override content-box in Normalize (* isn't specific enough)
-input[type="search"] {
+input[type='search'] {
   .box-sizing(border-box);
 }
 
 // Position radios and checkboxes better
-input[type="radio"],
-input[type="checkbox"] {
+input[type='radio'],
+input[type='checkbox'] {
   margin: 4px 0 0;
   margin-top: 1px \9; /* IE8-9 */
   line-height: normal;
 }
 
 // Set the height of file controls to match text inputs
-input[type="file"] {
+input[type='file'] {
   display: block;
 }
 
 // Make range inputs behave like textual form controls
-input[type="range"] {
+input[type='range'] {
   display: block;
   width: 100%;
 }
@@ -73,9 +71,9 @@ select[size] {
 }
 
 // Focus for file, radio, and checkbox
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
+input[type='file']:focus,
+input[type='radio']:focus,
+input[type='checkbox']:focus {
   .tab-focus();
 }
 
@@ -88,7 +86,6 @@ output {
   color: @input-color;
 }
 
-
 // Common form controls
 //
 // Shared size and type resets for form controls. Apply `.form-control` to any
@@ -123,8 +120,8 @@ output {
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid @input-border;
   border-radius: @input-border-radius;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
+  .transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s');
 
   // Customize the `:focus` state to imitate native WebKit styles.
   .form-control-focus();
@@ -150,13 +147,12 @@ output {
     height: auto;
     border-radius: @border-radius-base;
   }
-	// Smaller border-radius for `select` inputs
-	select& {
+  // Smaller border-radius for `select` inputs
+  select& {
     border-radius: @border-radius-base;
-	}
+  }
 }
 
-
 // Search inputs in iOS
 //
 // This overrides the extra rounded corners on search inputs in iOS so that our
@@ -164,21 +160,19 @@ output {
 // be added to `.form-control` as it's not specific enough. For details, see
 // https://github.com/twbs/bootstrap/issues/11586.
 
-input[type="search"] {
+input[type='search'] {
   -webkit-appearance: none;
 }
 
-
 // Special styles for iOS date input
 //
 // In Mobile Safari, date inputs require a pixel line-height that matches the
 // given height of the input.
 
-input[type="date"] {
+input[type='date'] {
   line-height: @input-height-base;
 }
 
-
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -188,7 +182,6 @@ input[type="date"] {
   margin-bottom: 15px;
 }
 
-
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
@@ -206,10 +199,10 @@ input[type="date"] {
     cursor: pointer;
   }
 }
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
+.radio input[type='radio'],
+.radio-inline input[type='radio'],
+.checkbox input[type='checkbox'],
+.checkbox-inline input[type='checkbox'] {
   float: left;
   margin-left: -20px;
 }
@@ -237,8 +230,8 @@ input[type="date"] {
 // Apply same disabled cursor tweak as for inputs
 //
 // Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"],
+input[type='radio'],
+input[type='checkbox'],
 .radio,
 .radio-inline,
 .checkbox,
@@ -249,21 +242,25 @@ input[type="checkbox"],
   }
 }
 
-
 // Form control sizing
 //
 // Build on `.form-control` with modifier classes to decrease or increase the
 // height and font-size of form controls.
 
 .input-sm {
-  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .input-size(
+    @input-height-small; @padding-small-vertical; @padding-small-horizontal;
+      @font-size-small; @line-height-small; @border-radius-small
+  );
 }
 
 .input-lg {
-  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+  .input-size(
+    @input-height-large; @padding-large-vertical; @padding-large-horizontal;
+      @font-size-large; @line-height-large; @border-radius-large
+  );
 }
 
-
 // Form control feedback states
 //
 // Apply contextual and semantic states to individual form controls.
@@ -309,27 +306,35 @@ input[type="checkbox"],
 
 // Feedback states
 .has-success {
-  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+  .form-control-validation(
+    @state-success-text; @state-success-text; @state-success-bg
+  );
 }
 .has-warning {
-  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+  .form-control-validation(
+    @state-warning-text; @state-warning-text; @state-warning-bg
+  );
 }
 .has-external-error {
-  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
-  color:@red;
+  .form-control-validation(
+    @state-danger-text; @state-danger-text; @state-danger-bg
+  );
+  color: @red;
 }
 
 .form-control.ng-dirty.ng-invalid:not(:focus) {
   border-color: @state-danger-text;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+  .box-shadow(
+    inset 0 1px 1px rgba(0, 0, 0, 0.075)
+  ); // Redeclare so transitions work
   &:focus {
     border-color: darken(@state-danger-text, 10%);
-    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%);
+    @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 6px lighten(@state-danger-text, 20%);
     .box-shadow(@shadow);
   }
 }
 
-
 // Static form control text
 //
 // Apply class to a `p` element to make any string of text align with labels in
@@ -339,7 +344,6 @@ input[type="checkbox"],
   margin-bottom: 0; // Remove default margin from `p`
 }
 
-
 // Help text
 //
 // Apply to any element you wish to create light text for placement immediately
@@ -352,8 +356,6 @@ input[type="checkbox"],
   color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
 
-
-
 // Inline forms
 //
 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -366,7 +368,6 @@ input[type="checkbox"],
 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
 
 .form-inline {
-
   // Kick in the inline
   @media (min-width: @screen-sm-min) {
     // Inline-block all the things for "inline"
@@ -403,8 +404,8 @@ input[type="checkbox"],
       padding-left: 0;
       vertical-align: middle;
     }
-    .radio input[type="radio"],
-    .checkbox input[type="checkbox"] {
+    .radio input[type='radio'],
+    .checkbox input[type='checkbox'] {
       float: none;
       margin-left: 0;
     }
@@ -419,14 +420,12 @@ input[type="checkbox"],
   }
 }
 
-
 // Horizontal forms
 //
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
 .form-horizontal {
-
   // Consistent vertical alignment of labels, radios, and checkboxes
   .control-label,
   .radio,

services/web/frontend/stylesheets/components/hover.less

@@ -1,11 +1,11 @@
 .hover-container {
-	.show-on-hover {
-		display: none;
-	}
-	
-	&:hover {
-		.show-on-hover {
-			display: initial;
-		}
-	}
-}
+  .show-on-hover {
+    display: none;
+  }
+
+  &:hover {
+    .show-on-hover {
+      display: initial;
+    }
+  }
+}

services/web/frontend/stylesheets/components/icons.less

@@ -6,4 +6,4 @@
 // Sizes
 .icon-lg {
   font-size: @font-size-h1;
-}
+}

services/web/frontend/stylesheets/components/images.less

@@ -1,17 +1,17 @@
 .circle-img {
-	border-radius: 50%;
-	float: left;
-	// float: right;
-	height: 100px;
-	overflow: hidden;
-	position: relative;
-	max-width: 100px;
-	img {
-		display: inline;
-		margin: 0 auto;
-		width: 100%;
-	}
+  border-radius: 50%;
+  float: left;
+  // float: right;
+  height: 100px;
+  overflow: hidden;
+  position: relative;
+  max-width: 100px;
+  img {
+    display: inline;
+    margin: 0 auto;
+    width: 100%;
+  }
 }
 .blockquote-with-img {
-	margin-left: 115px;
-}
+  margin-left: 115px;
+}

services/web/frontend/stylesheets/components/input-groups.less

@@ -10,7 +10,7 @@
   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
 
   // Undo padding and float of grid classes
-  &[class*="col-"] {
+  &[class*='col-'] {
     float: none;
     padding-left: 0;
     padding-right: 0;
@@ -39,11 +39,14 @@
 
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn { .input-lg(); }
+.input-group-lg > .input-group-btn > .btn {
+  .input-lg();
+}
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn { .input-sm(); }
-
+.input-group-sm > .input-group-btn > .btn {
+  .input-sm();
+}
 
 // Display as table-cell
 // -------------------------
@@ -90,8 +93,8 @@
   }
 
   // Nuke default margins from checkboxes and radios to vertically center within.
-  input[type="radio"],
-  input[type="checkbox"] {
+  input[type='radio'],
+  input[type='checkbox'] {
     margin-top: 0;
   }
 }

services/web/frontend/stylesheets/components/input-suggestions.less

@@ -1,21 +1,21 @@
 .input-suggestions {
-	position: relative;
-	height: @input-height-base;
+  position: relative;
+  height: @input-height-base;
+}
+.input-suggestions-main {
+  position: absolute;
+  top: 0;
+  background-color: transparent;
 }
-	.input-suggestions-main {
-		position: absolute;
-		top: 0;
-		background-color: transparent;
-	}
 
-	.input-suggestions-shadow {
-		background-color: @input-bg;
-		padding-top: @input-suggestion-v-offset;
-	}
-		.input-suggestions-shadow-existing {
-			color: transparent;
-		}
+.input-suggestions-shadow {
+  background-color: @input-bg;
+  padding-top: @input-suggestion-v-offset;
+}
+.input-suggestions-shadow-existing {
+  color: transparent;
+}
 
-		.input-suggestions-shadow-suggested {
-			color: lighten(@input-color, 25%);
-		}
+.input-suggestions-shadow-suggested {
+  color: lighten(@input-color, 25%);
+}

services/web/frontend/stylesheets/components/jumbotron.less

@@ -2,7 +2,6 @@
 // Jumbotron
 // --------------------------------------------------
 
-
 .jumbotron {
   padding: @jumbotron-padding;
   margin-bottom: @jumbotron-padding;
@@ -28,11 +27,11 @@
   }
 
   @media screen and (min-width: @screen-sm-min) {
-    padding-top:    (@jumbotron-padding * 1.6);
+    padding-top: (@jumbotron-padding * 1.6);
     padding-bottom: (@jumbotron-padding * 1.6);
 
     .container & {
-      padding-left:  (@jumbotron-padding * 2);
+      padding-left: (@jumbotron-padding * 2);
       padding-right: (@jumbotron-padding * 2);
     }
 

services/web/frontend/stylesheets/components/labels.less

@@ -4,7 +4,7 @@
 
 .label {
   display: inline;
-  padding: .2em .6em .3em;
+  padding: 0.2em 0.6em 0.3em;
   font-size: @labels-font-size;
   font-weight: bold;
   line-height: 1;
@@ -12,7 +12,7 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: .25em;
+  border-radius: 0.25em;
 
   // Add hover effects, but only for links
   &[href] {

services/web/frontend/stylesheets/components/list-group.less

@@ -2,7 +2,6 @@
 // List groups
 // --------------------------------------------------
 
-
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
@@ -13,7 +12,6 @@
   padding-left: 0; // reset padding because ul and ol
 }
 
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -45,7 +43,6 @@
   }
 }
 
-
 // Linked list items
 //
 // Use anchor elements instead of `li`s or `div`s to create linked list items.
@@ -84,7 +81,6 @@ a.list-group-item {
   }
 }
 
-
 // Contextual variants
 //
 // Add modifier classes to change text and background color on individual items.
@@ -95,7 +91,6 @@ a.list-group-item {
 .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
 .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
 
-
 // Custom content options
 //
 // Extra classes for creating well-formatted content within `.list-group-item`s.

services/web/frontend/stylesheets/components/lists.less

@@ -1,23 +1,23 @@
 .list-like-table {
-	border: 1px solid @hr-border;
-	border-radius: @border-radius-base;
-	list-style: none;
-	margin: 0;
-	padding: 0 @padding-sm;
-	li {
-		border-top: 1px solid @hr-border;
-		div {
-			display: table-cell;
-			float: none;
-			vertical-align: middle;
-		}
-		.row {
-			display: table;
-			margin: 0;
-			width: 100%;
-		}
-		&:first-child {
-			border-top: 0;
-		}
-	}
-}
+  border: 1px solid @hr-border;
+  border-radius: @border-radius-base;
+  list-style: none;
+  margin: 0;
+  padding: 0 @padding-sm;
+  li {
+    border-top: 1px solid @hr-border;
+    div {
+      display: table-cell;
+      float: none;
+      vertical-align: middle;
+    }
+    .row {
+      display: table;
+      margin: 0;
+      width: 100%;
+    }
+    &:first-child {
+      border-top: 0;
+    }
+  }
+}

services/web/frontend/stylesheets/components/media.less

@@ -2,7 +2,6 @@
 // Source: http://stubbornella.org/content/?p=497
 // --------------------------------------------------
 
-
 // Common styles
 // -------------------------
 
@@ -32,7 +31,6 @@
   margin: 0 0 5px;
 }
 
-
 // Media image alignment
 // -------------------------
 
@@ -45,7 +43,6 @@
   }
 }
 
-
 // Media list variation
 // -------------------------
 

services/web/frontend/stylesheets/components/modals.less

@@ -32,9 +32,12 @@
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
     .translate(0, -25%);
-    .transition-transform(~"0.3s ease-out");
+    .transition-transform(~'0.3s ease-out');
+  }
+  &.in .modal-dialog {
+    // prettier-ignore
+    .translate(0, 0);
   }
-  &.in .modal-dialog { .translate(0, 0)}
 }
 
 // Shell div to position the modal with bottom padding
@@ -51,7 +54,7 @@
   border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
   border: 1px solid @modal-content-border-color;
   border-radius: @border-radius-large;
-  .box-shadow(0 3px 9px rgba(0,0,0,.5));
+  .box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
   background-clip: padding-box;
   // Remove focus outline from opened modal
   outline: none;
@@ -67,8 +70,12 @@
   z-index: @zindex-modal-background;
   background-color: @modal-backdrop-bg;
   // Fade for backdrop
-  &.fade { .opacity(0); }
-  &.in { .opacity(@modal-backdrop-opacity); }
+  &.fade {
+    .opacity(0);
+  }
+  &.in {
+    .opacity(@modal-backdrop-opacity);
+  }
 }
 
 // Modal header
@@ -83,7 +90,11 @@
   margin-top: -2px;
 }
 .modal-header {
-  h1, h2, h3, h4, h5 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
     margin: 0;
     font-family: @font-family-sans-serif;
     font-weight: 700;
@@ -111,7 +122,8 @@
   border-top: 1px solid @modal-footer-border-color;
   background-color: @modal-footer-background-color;
   border-radius: 0 0 @border-radius-large @border-radius-large;
-  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
+  &:extend(.clearfix
+      all); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
   .btn + .btn {
@@ -140,13 +152,17 @@
     margin: 30px auto;
   }
   .modal-content {
-    .box-shadow(0 5px 15px rgba(0,0,0,.5));
+    .box-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
   }
 
   // Modal sizes
-  .modal-sm { width: @modal-sm; }
+  .modal-sm {
+    width: @modal-sm;
+  }
 }
 
 @media (min-width: @screen-md-min) {
-  .modal-lg { width: @modal-lg; }
+  .modal-lg {
+    width: @modal-lg;
+  }
 }

services/web/frontend/stylesheets/components/navbar.less

@@ -2,7 +2,6 @@
 // Navbars
 // --------------------------------------------------
 
-
 // Wrapper and base class
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
@@ -35,7 +34,6 @@
   }
 }
 
-
 // Navbar collapse (body)
 //
 // Group your navbar content into this for easy collapsing and expanding across
@@ -50,7 +48,7 @@
   max-height: @navbar-collapse-max-height;
   overflow-x: visible;
   padding-right: @navbar-padding-horizontal;
-  padding-left:  @navbar-padding-horizontal;
+  padding-left: @navbar-padding-horizontal;
   &:extend(.clearfix all);
   -webkit-overflow-scrolling: touch;
 
@@ -85,7 +83,6 @@
   }
 }
 
-
 .navbar-main {
   z-index: 1;
   .container-fluid > .navbar-collapse {
@@ -106,13 +103,13 @@
     padding: 0;
 
     @media (min-width: @grid-float-breakpoint) {
-      // Get back to regular layout mode as soon as the menu items are 
+      // Get back to regular layout mode as soon as the menu items are
       // expanded (i.e. not contained within the hamburguer menu).
       position: static;
       background-color: transparent;
       border-bottom: 0;
       padding-right: @navbar-padding-horizontal;
-      padding-left:  @navbar-padding-horizontal;
+      padding-left: @navbar-padding-horizontal;
     }
   }
 }
@@ -125,16 +122,15 @@
   > .navbar-header,
   > .navbar-collapse {
     margin-right: -@navbar-padding-horizontal;
-    margin-left:  -@navbar-padding-horizontal;
+    margin-left: -@navbar-padding-horizontal;
 
     @media (min-width: @grid-float-breakpoint) {
       margin-right: 0;
-      margin-left:  0;
+      margin-left: 0;
     }
   }
 }
 
-
 //
 // Navbar alignment options
 //
@@ -174,7 +170,6 @@
   border-width: 1px 0 0;
 }
 
-
 // Brand/project name
 
 .navbar-brand {
@@ -198,17 +193,18 @@
 }
 
 .navbar-title {
-    font-size: 20px;
-    display: inline-block;
-    margin-top: 2px;
-    color: @navbar-title-color;
-    &:hover, &:active, &:focus {
-        color: @navbar-title-color-hover;
-        text-decoration: none;
-    }
+  font-size: 20px;
+  display: inline-block;
+  margin-top: 2px;
+  color: @navbar-title-color;
+  &:hover,
+  &:active,
+  &:focus {
+    color: @navbar-title-color-hover;
+    text-decoration: none;
+  }
 }
 
-
 // Navbar toggle
 //
 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -233,7 +229,6 @@
   }
 }
 
-
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with its own modifier class to make
@@ -243,7 +238,7 @@
   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
 
   > li > a {
-    padding-top:    10px;
+    padding-top: 10px;
     padding-bottom: 10px;
     line-height: @line-height-computed;
   }
@@ -275,7 +270,6 @@
       }
       > li > div.subdued {
         line-height: @line-height-computed;
-
       }
     }
   }
@@ -288,7 +282,7 @@
     > li {
       float: left;
       > a {
-        padding-top:    @navbar-padding-vertical;
+        padding-top: @navbar-padding-vertical;
         padding-bottom: @navbar-padding-vertical;
       }
     }
@@ -299,7 +293,6 @@
   }
 }
 
-
 // Component alignment
 //
 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
@@ -307,11 +300,14 @@
 // though so that navbar contents properly stack and align in mobile.
 
 @media (min-width: @grid-float-breakpoint) {
-  .navbar-left  { .pull-left(); }
-  .navbar-right { .pull-right(); }
+  .navbar-left {
+    .pull-left();
+  }
+  .navbar-right {
+    .pull-right();
+  }
 }
 
-
 // Navbar form
 //
 // Extension of the `.form-inline` with some extra flavor for optimum display in
@@ -323,7 +319,8 @@
   padding: 10px @navbar-padding-horizontal;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+  @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 1px 0 rgba(255, 255, 255, 0.1);
   .box-shadow(@shadow);
 
   // Mixin behavior for optimum display
@@ -355,7 +352,6 @@
   }
 }
 
-
 // Dropdown menus
 
 // Menu position and menu carets
@@ -368,7 +364,6 @@
   .border-bottom-radius(0);
 }
 
-
 // Buttons in navbars
 //
 // Vertically center a button within a navbar (when *not* in a form).
@@ -384,7 +379,6 @@
   }
 }
 
-
 // Text in navbars
 //
 // Add a class to make any element properly align itself vertically within the navbars.
@@ -416,7 +410,7 @@
   top: 0;
   width: 100%;
   height: @header-height;
-  
+
   .navbar-brand {
     position: absolute;
     top: 5px;
@@ -482,7 +476,7 @@
         background-color: @navbar-subdued-hover-bg;
       }
       &:focus {
-        .tab-focus()
+        .tab-focus();
       }
       @media (min-width: @grid-float-breakpoint) {
         padding: @navbar-subdued-padding;
@@ -514,7 +508,7 @@
   }
 
   .navbar-collapse.in {
-    box-shadow: 0 10px 15px rgba(0, 0, 0, .25);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
   }
   // Dropdown menu items
   .navbar-nav {
@@ -576,7 +570,6 @@
     }
   }
 
-
   // Links in navbars
   //
   // Add a class to ensure links outside the navbar nav are colored correctly.
@@ -587,7 +580,6 @@
       color: @navbar-default-link-hover-color;
     }
   }
-
 }
 
 .navbar-default when (@is-overleaf = true) {

services/web/frontend/stylesheets/components/navs-ol.less

@@ -4,4 +4,4 @@
       border-radius: @btn-border-radius-base;
     }
   }
-}
+}

services/web/frontend/stylesheets/components/navs.less

@@ -2,7 +2,6 @@
 // Navs
 // --------------------------------------------------
 
-
 // Base class
 // --------------------------------------------------
 
@@ -69,7 +68,6 @@
   }
 }
 
-
 // Tabs
 // -------------------------
 
@@ -89,7 +87,8 @@
       border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
         cursor: pointer;
-        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
+        border-color: @nav-tabs-link-hover-border-color
+          @nav-tabs-link-hover-border-color @nav-tabs-border-color;
       }
     }
 
@@ -113,7 +112,6 @@
   }
 }
 
-
 // Pills
 // -------------------------
 .nav-pills {
@@ -149,7 +147,6 @@
   }
 }
 
-
 // Stacked pills
 .nav-stacked {
   > li {
@@ -161,7 +158,6 @@
   }
 }
 
-
 // Nav variations
 // --------------------------------------------------
 
@@ -173,7 +169,7 @@
 
   > li {
     float: none;
-     > a {
+    > a {
       text-align: center;
       margin-bottom: 5px;
     }
@@ -226,7 +222,6 @@
   }
 }
 
-
 // Tabbable tabs
 // -------------------------
 
@@ -244,7 +239,6 @@
   }
 }
 
-
 // Dropdowns
 // -------------------------
 
@@ -254,4 +248,4 @@
   margin-top: -1px;
   // Remove the top rounded corners here since there is a hard edge above the menu
   .border-top-radius(0);
-}
+}

services/web/frontend/stylesheets/components/nvd3.less

@@ -1,96 +1,96 @@
 /* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */
-.nvd3 .nv-axis {
-    pointer-events:none;
-    opacity: 1;
-}
-
-.nvd3 .nv-axis path {
-    fill: none;
-    stroke: #000;
-    stroke-opacity: .75;
-    shape-rendering: crispEdges;
-}
-
-.nvd3 .nv-axis path.domain {
-    stroke-opacity: .75;
-}
-
-.nvd3 .nv-axis.nv-x path.domain {
-    stroke-opacity: 0;
-}
-
-.nvd3 .nv-axis line {
-    fill: none;
-    stroke: #e5e5e5;
-    shape-rendering: crispEdges;
-}
-
+.nvd3 .nv-axis {
+  pointer-events: none;
+  opacity: 1;
+}
+
+.nvd3 .nv-axis path {
+  fill: none;
+  stroke: #000;
+  stroke-opacity: 0.75;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis path.domain {
+  stroke-opacity: 0.75;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+  stroke-opacity: 0;
+}
+
+.nvd3 .nv-axis line {
+  fill: none;
+  stroke: #e5e5e5;
+  shape-rendering: crispEdges;
+}
+
 .nvd3 .nv-axis .zero line,
-    /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
-    stroke-opacity: .75;
-}
-
-.nvd3 .nv-axis .nv-axisMaxMin text {
-    font-weight: bold;
-}
-
-.nvd3 .x  .nv-axis .nv-axisMaxMin text,
-.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
-.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
-    text-anchor: middle
-}
-
-.nvd3 .nv-axis.nv-disabled {
-    opacity: 0;
-}
-
-.nvd3 .nv-bars rect {
-    fill-opacity: .75;
-
-    transition: fill-opacity 250ms linear;
-    -moz-transition: fill-opacity 250ms linear;
-    -webkit-transition: fill-opacity 250ms linear;
-}
-
-.nvd3 .nv-bars rect.hover {
-    fill-opacity: 1;
-}
-
-.nvd3 .nv-bars .hover rect {
-    fill: lightblue;
-}
-
-.nvd3 .nv-bars text {
-    fill: rgba(0,0,0,0);
-}
-
-.nvd3 .nv-bars .hover text {
-    fill: rgba(0,0,0,1);
-}
-
-.nvd3 .nv-multibar .nv-groups rect,
-.nvd3 .nv-multibarHorizontal .nv-groups rect,
-.nvd3 .nv-discretebar .nv-groups rect {
-    stroke-opacity: 0;
-
-    transition: fill-opacity 250ms linear;
-    -moz-transition: fill-opacity 250ms linear;
-    -webkit-transition: fill-opacity 250ms linear;
-}
-
-.nvd3 .nv-multibar .nv-groups rect:hover,
-.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
-.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
-.nvd3 .nv-discretebar .nv-groups rect:hover {
-    fill-opacity: 1;
-}
-
-.nvd3 .nv-discretebar .nv-groups text,
-.nvd3 .nv-multibarHorizontal .nv-groups text {
-    font-weight: bold;
-    fill: rgba(0,0,0,1);
-    stroke: rgba(0,0,0,0);
-}
+    /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
+  stroke-opacity: 0.75;
+}
+
+.nvd3 .nv-axis .nv-axisMaxMin text {
+  font-weight: bold;
+}
+
+.nvd3 .x .nv-axis .nv-axisMaxMin text,
+.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
+.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
+  text-anchor: middle;
+}
+
+.nvd3 .nv-axis.nv-disabled {
+  opacity: 0;
+}
+
+.nvd3 .nv-bars rect {
+  fill-opacity: 0.75;
+
+  transition: fill-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-bars rect.hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-bars .hover rect {
+  fill: lightblue;
+}
+
+.nvd3 .nv-bars text {
+  fill: rgba(0, 0, 0, 0);
+}
+
+.nvd3 .nv-bars .hover text {
+  fill: rgba(0, 0, 0, 1);
+}
+
+.nvd3 .nv-multibar .nv-groups rect,
+.nvd3 .nv-multibarHorizontal .nv-groups rect,
+.nvd3 .nv-discretebar .nv-groups rect {
+  stroke-opacity: 0;
+
+  transition: fill-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-multibar .nv-groups rect:hover,
+.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
+.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
+.nvd3 .nv-discretebar .nv-groups rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-discretebar .nv-groups text,
+.nvd3 .nv-multibarHorizontal .nv-groups text {
+  font-weight: bold;
+  fill: rgba(0, 0, 0, 1);
+  stroke: rgba(0, 0, 0, 0);
+}
 
 /* boxplot CSS */
 .nvd3 .nv-boxplot circle {
@@ -112,58 +112,85 @@
 .nv-boxplot-tick:hover {
   stroke-width: 2.5px;
 }
-/* bullet */
-.nvd3.nv-bullet { font: 10px sans-serif; }
-.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
-.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
-.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
-.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
-.nvd3.nv-bullet .nv-markerLine { stroke: #000; stroke-width: 1.5px; }
-.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
-.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
-.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
-.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
-.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
-.nvd3.nv-bullet .nv-subtitle { fill: #999; }
-
-
-.nvd3.nv-bullet .nv-range {
-    fill: #bababa;
-    fill-opacity: .4;
-}
-.nvd3.nv-bullet .nv-range:hover {
-    fill-opacity: .7;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
-    stroke-width: 1px;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
-    stroke-width: 2px;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
-    stroke: #2ca02c;
-    fill: #2ca02c;
-}
-
-.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
-    stroke: #d62728;
-    fill: #d62728;
-}
-
-.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
-    transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-    -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-    -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-
-}
-
-.nvd3.nv-candlestickBar .nv-ticks line {
-    stroke: #333;
-}
-
+/* bullet */
+.nvd3.nv-bullet {
+  font: 10px sans-serif;
+}
+.nvd3.nv-bullet .nv-measure {
+  fill-opacity: 0.8;
+}
+.nvd3.nv-bullet .nv-measure:hover {
+  fill-opacity: 1;
+}
+.nvd3.nv-bullet .nv-marker {
+  stroke: #000;
+  stroke-width: 2px;
+}
+.nvd3.nv-bullet .nv-markerTriangle {
+  stroke: #000;
+  fill: #fff;
+  stroke-width: 1.5px;
+}
+.nvd3.nv-bullet .nv-markerLine {
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+.nvd3.nv-bullet .nv-tick line {
+  stroke: #666;
+  stroke-width: 0.5px;
+}
+.nvd3.nv-bullet .nv-range.nv-s0 {
+  fill: #eee;
+}
+.nvd3.nv-bullet .nv-range.nv-s1 {
+  fill: #ddd;
+}
+.nvd3.nv-bullet .nv-range.nv-s2 {
+  fill: #ccc;
+}
+.nvd3.nv-bullet .nv-title {
+  font-size: 14px;
+  font-weight: bold;
+}
+.nvd3.nv-bullet .nv-subtitle {
+  fill: #999;
+}
+
+.nvd3.nv-bullet .nv-range {
+  fill: #bababa;
+  fill-opacity: 0.4;
+}
+.nvd3.nv-bullet .nv-range:hover {
+  fill-opacity: 0.7;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
+  stroke-width: 1px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
+  stroke: #2ca02c;
+  fill: #2ca02c;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
+  stroke: #d62728;
+  fill: #d62728;
+}
+
+.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks line {
+  stroke: #333;
+}
 
 .nv-force-node {
   stroke: #fff;
@@ -171,504 +198,494 @@
 }
 .nv-force-link {
   stroke: #999;
-  stroke-opacity: .6;
+  stroke-opacity: 0.6;
 }
 .nv-force-node text {
-  stroke-width: 0px
+  stroke-width: 0px;
 }
 
 .nvd3 .nv-legend .nv-disabled rect {
-    /*fill-opacity: 0;*/
+  /*fill-opacity: 0;*/
 }
 
 .nvd3 .nv-check-box .nv-box {
-    fill-opacity:0;
-    stroke-width:2;
+  fill-opacity: 0;
+  stroke-width: 2;
 }
 
 .nvd3 .nv-check-box .nv-check {
-    fill-opacity:0;
-    stroke-width:4;
+  fill-opacity: 0;
+  stroke-width: 4;
 }
 
 .nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
-    fill-opacity:0;
-    stroke-opacity:0;
+  fill-opacity: 0;
+  stroke-opacity: 0;
 }
 
 .nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
-    opacity: 0;
-}
-
-/* line plus bar */
-.nvd3.nv-linePlusBar .nv-bar rect {
-    fill-opacity: .75;
-}
-
-.nvd3.nv-linePlusBar .nv-bar rect:hover {
-    fill-opacity: 1;
-}
-.nvd3 .nv-groups path.nv-line {
-    fill: none;
-}
-
-.nvd3 .nv-groups path.nv-area {
-    stroke: none;
-}
-
-.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
-    fill-opacity: 0;
-    stroke-opacity: 0;
-}
-
-.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
-    fill-opacity: .5 !important;
-    stroke-opacity: .5 !important;
-}
-
-
-.with-transitions .nvd3 .nv-groups .nv-point {
-    transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-    -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-    -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-
-}
-
-.nvd3.nv-scatter .nv-groups .nv-point.hover,
-.nvd3 .nv-groups .nv-point.hover {
-    stroke-width: 7px;
-    fill-opacity: .95 !important;
-    stroke-opacity: .95 !important;
-}
-
-
-.nvd3 .nv-point-paths path {
-    stroke: #aaa;
-    stroke-opacity: 0;
-    fill: #eee;
-    fill-opacity: 0;
-}
-
-
-
-.nvd3 .nv-indexLine {
-    cursor: ew-resize;
-}
+  opacity: 0;
+}
+
+/* line plus bar */
+.nvd3.nv-linePlusBar .nv-bar rect {
+  fill-opacity: 0.75;
+}
+
+.nvd3.nv-linePlusBar .nv-bar rect:hover {
+  fill-opacity: 1;
+}
+.nvd3 .nv-groups path.nv-line {
+  fill: none;
+}
+
+.nvd3 .nv-groups path.nv-area {
+  stroke: none;
+}
+
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
+  fill-opacity: 0.5 !important;
+  stroke-opacity: 0.5 !important;
+}
+
+.with-transitions .nvd3 .nv-groups .nv-point {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-scatter .nv-groups .nv-point.hover,
+.nvd3 .nv-groups .nv-point.hover {
+  stroke-width: 7px;
+  fill-opacity: 0.95 !important;
+  stroke-opacity: 0.95 !important;
+}
+
+.nvd3 .nv-point-paths path {
+  stroke: #aaa;
+  stroke-opacity: 0;
+  fill: #eee;
+  fill-opacity: 0;
+}
+
+.nvd3 .nv-indexLine {
+  cursor: ew-resize;
+}
 
 /********************
  * SVG CSS
- */
-
+ */
+
 /********************
   Default CSS for an svg element nvd3 used
-*/
-svg.nvd3-svg {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    display: block;
-    width:100%;
-    height:100%;
-}
-
+*/
+svg.nvd3-svg {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 /********************
   Box shadow and border radius styling
-*/
-.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
-    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-    box-shadow: 0 5px 10px rgba(0,0,0,.2);
-
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-}
-
-
-.nvd3 text {
-    font: normal 12px Arial;
-}
-
-.nvd3 .title {
-    font: bold 14px Arial;
-}
-
-.nvd3 .nv-background {
-    fill: white;
-    fill-opacity: 0;
-}
-
-.nvd3.nv-noData {
-    font-size: 18px;
-    font-weight: bold;
-}
-
-
+*/
+.nvtooltip.with-3d-shadow,
+.with-3d-shadow .nvtooltip {
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.nvd3 text {
+  font: normal 12px Arial;
+}
+
+.nvd3 .title {
+  font: bold 14px Arial;
+}
+
+.nvd3 .nv-background {
+  fill: white;
+  fill-opacity: 0;
+}
+
+.nvd3.nv-noData {
+  font-size: 18px;
+  font-weight: bold;
+}
+
 /**********
 *  Brush
-*/
-
-.nv-brush .extent {
-    fill-opacity: .125;
-    shape-rendering: crispEdges;
-}
-
-.nv-brush .resize path {
-    fill: #eee;
-    stroke: #666;
-}
-
-
+*/
+
+.nv-brush .extent {
+  fill-opacity: 0.125;
+  shape-rendering: crispEdges;
+}
+
+.nv-brush .resize path {
+  fill: #eee;
+  stroke: #666;
+}
+
 /**********
 *  Legend
-*/
-
-.nvd3 .nv-legend .nv-series {
-    cursor: pointer;
-}
-
-.nvd3 .nv-legend .nv-disabled circle {
-    fill-opacity: 0;
-}
-
-/* focus */
-.nvd3 .nv-brush .extent {
-    fill-opacity: 0 !important;
-}
-
-.nvd3 .nv-brushBackground rect {
-    stroke: #000;
-    stroke-width: .4;
-    fill: #fff;
-    fill-opacity: .7;
-}
-
+*/
+
+.nvd3 .nv-legend .nv-series {
+  cursor: pointer;
+}
+
+.nvd3 .nv-legend .nv-disabled circle {
+  fill-opacity: 0;
+}
+
+/* focus */
+.nvd3 .nv-brush .extent {
+  fill-opacity: 0 !important;
+}
+
+.nvd3 .nv-brushBackground rect {
+  stroke: #000;
+  stroke-width: 0.4;
+  fill: #fff;
+  fill-opacity: 0.7;
+}
+
 /**********
 *  Print
-*/
-
-@media print {
-  .nvd3 text {
-    stroke-width: 0;
-    fill-opacity: 1;
-  }
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
-    stroke-width: 1px;
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
-    stroke-width: 2px;
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
-    stroke: #2ca02c;
-}
-
-.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
-    stroke: #d62728;
-}
-
-
-.nvd3 .background path {
-    fill: none;
-    stroke: #EEE;
-    stroke-opacity: .4;
-    shape-rendering: crispEdges;
-}
-
-.nvd3 .foreground path {
-    fill: none;
-    stroke-opacity: .7;
-}
-
-.nvd3 .nv-parallelCoordinates-brush .extent 
-{
-    fill: #fff;
-    fill-opacity: .6;
-    stroke: gray;
-    shape-rendering: crispEdges;
-}
-
-.nvd3 .nv-parallelCoordinates .hover  {
-    fill-opacity: 1;
-	stroke-width: 3px;
-}
-
-
-.nvd3 .missingValuesline line {
-  fill: none;
-  stroke: black;
-  stroke-width: 1;
-  stroke-opacity: 1;
-  stroke-dasharray: 5, 5; 
-}
-.nvd3.nv-pie path {
-    stroke-opacity: 0;
-    transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-    -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-    -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-
-}
-
-.nvd3.nv-pie .nv-pie-title {
-    font-size: 24px;
-    fill: rgba(19, 196, 249, 0.59);
-}
-
-.nvd3.nv-pie .nv-slice text {
-    stroke: #000;
-    stroke-width: 0;
-}
-
-.nvd3.nv-pie path {
-    stroke: #fff;
-    stroke-width: 1px;
-    stroke-opacity: 1;
-}
-
-.nvd3.nv-pie path {
-    fill-opacity: .7;
-}
-.nvd3.nv-pie .hover path {
-    fill-opacity: 1;
-}
-.nvd3.nv-pie .nv-label {
-    pointer-events: none;
-}
-.nvd3.nv-pie .nv-label rect {
-    fill-opacity: 0;
-    stroke-opacity: 0;
-}
-
-/* scatter */
-.nvd3 .nv-groups .nv-point.hover {
-    stroke-width: 20px;
-    stroke-opacity: .5;
-}
-
-.nvd3 .nv-scatter .nv-point.hover {
-    fill-opacity: 1;
-}
-.nv-noninteractive {
-    pointer-events: none;
-}
-
-.nv-distx, .nv-disty {
-    pointer-events: none;
-}
-
-/* sparkline */
-.nvd3.nv-sparkline path {
-    fill: none;
-}
-
-.nvd3.nv-sparklineplus g.nv-hoverValue {
-    pointer-events: none;
-}
-
-.nvd3.nv-sparklineplus .nv-hoverValue line {
-    stroke: #333;
-    stroke-width: 1.5px;
-}
-
-.nvd3.nv-sparklineplus,
-.nvd3.nv-sparklineplus g {
-    pointer-events: all;
-}
-
-.nvd3 .nv-hoverArea {
-    fill-opacity: 0;
-    stroke-opacity: 0;
-}
-
-.nvd3.nv-sparklineplus .nv-xValue,
-.nvd3.nv-sparklineplus .nv-yValue {
-    stroke-width: 0;
-    font-size: .9em;
-    font-weight: normal;
-}
-
-.nvd3.nv-sparklineplus .nv-yValue {
-    stroke: #f66;
-}
-
-.nvd3.nv-sparklineplus .nv-maxValue {
-    stroke: #2ca02c;
-    fill: #2ca02c;
-}
-
-.nvd3.nv-sparklineplus .nv-minValue {
-    stroke: #d62728;
-    fill: #d62728;
-}
-
-.nvd3.nv-sparklineplus .nv-currentValue {
-    font-weight: bold;
-    font-size: 1.1em;
-}
-/* stacked area */
-.nvd3.nv-stackedarea path.nv-area {
-    fill-opacity: .7;
-    stroke-opacity: 0;
-    transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-    -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-    -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-}
-
-.nvd3.nv-stackedarea path.nv-area.hover {
-    fill-opacity: .9;
-}
-
-
-.nvd3.nv-stackedarea .nv-groups .nv-point {
-    stroke-opacity: 0;
-    fill-opacity: 0;
-}
-
-
-.nvtooltip {
-    position: absolute;
-    background-color: rgba(255,255,255,1.0);
-    color: rgba(0,0,0,1.0);
-    padding: 1px;
-    border: 1px solid rgba(0,0,0,.2);
-    z-index: 10000;
-    display: block;
-
-    font-family: Arial;
-    font-size: 13px;
-    text-align: left;
-    pointer-events: none;
-
-    white-space: nowrap;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.nvtooltip {
-    background: rgba(255,255,255, 0.8);
-    border: 1px solid rgba(0,0,0,0.5);
-    border-radius: 4px;
-}
-
+*/
+
+@media print {
+  .nvd3 text {
+    stroke-width: 0;
+    fill-opacity: 1;
+  }
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
+  stroke-width: 1px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
+  stroke: #2ca02c;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
+  stroke: #d62728;
+}
+
+.nvd3 .background path {
+  fill: none;
+  stroke: #eee;
+  stroke-opacity: 0.4;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .foreground path {
+  fill: none;
+  stroke-opacity: 0.7;
+}
+
+.nvd3 .nv-parallelCoordinates-brush .extent {
+  fill: #fff;
+  fill-opacity: 0.6;
+  stroke: gray;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-parallelCoordinates .hover {
+  fill-opacity: 1;
+  stroke-width: 3px;
+}
+
+.nvd3 .missingValuesline line {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+  stroke-opacity: 1;
+  stroke-dasharray: 5, 5;
+}
+.nvd3.nv-pie path {
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear, stroke-width 250ms linear,
+    stroke-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
+    stroke-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
+    stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-pie .nv-pie-title {
+  font-size: 24px;
+  fill: rgba(19, 196, 249, 0.59);
+}
+
+.nvd3.nv-pie .nv-slice text {
+  stroke: #000;
+  stroke-width: 0;
+}
+
+.nvd3.nv-pie path {
+  stroke: #fff;
+  stroke-width: 1px;
+  stroke-opacity: 1;
+}
+
+.nvd3.nv-pie path {
+  fill-opacity: 0.7;
+}
+.nvd3.nv-pie .hover path {
+  fill-opacity: 1;
+}
+.nvd3.nv-pie .nv-label {
+  pointer-events: none;
+}
+.nvd3.nv-pie .nv-label rect {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+/* scatter */
+.nvd3 .nv-groups .nv-point.hover {
+  stroke-width: 20px;
+  stroke-opacity: 0.5;
+}
+
+.nvd3 .nv-scatter .nv-point.hover {
+  fill-opacity: 1;
+}
+.nv-noninteractive {
+  pointer-events: none;
+}
+
+.nv-distx,
+.nv-disty {
+  pointer-events: none;
+}
+
+/* sparkline */
+.nvd3.nv-sparkline path {
+  fill: none;
+}
+
+.nvd3.nv-sparklineplus g.nv-hoverValue {
+  pointer-events: none;
+}
+
+.nvd3.nv-sparklineplus .nv-hoverValue line {
+  stroke: #333;
+  stroke-width: 1.5px;
+}
+
+.nvd3.nv-sparklineplus,
+.nvd3.nv-sparklineplus g {
+  pointer-events: all;
+}
+
+.nvd3 .nv-hoverArea {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3.nv-sparklineplus .nv-xValue,
+.nvd3.nv-sparklineplus .nv-yValue {
+  stroke-width: 0;
+  font-size: 0.9em;
+  font-weight: normal;
+}
+
+.nvd3.nv-sparklineplus .nv-yValue {
+  stroke: #f66;
+}
+
+.nvd3.nv-sparklineplus .nv-maxValue {
+  stroke: #2ca02c;
+  fill: #2ca02c;
+}
+
+.nvd3.nv-sparklineplus .nv-minValue {
+  stroke: #d62728;
+  fill: #d62728;
+}
+
+.nvd3.nv-sparklineplus .nv-currentValue {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+/* stacked area */
+.nvd3.nv-stackedarea path.nv-area {
+  fill-opacity: 0.7;
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-stackedarea path.nv-area.hover {
+  fill-opacity: 0.9;
+}
+
+.nvd3.nv-stackedarea .nv-groups .nv-point {
+  stroke-opacity: 0;
+  fill-opacity: 0;
+}
+
+.nvtooltip {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
+  padding: 1px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  z-index: 10000;
+  display: block;
+
+  font-family: Arial;
+  font-size: 13px;
+  text-align: left;
+  pointer-events: none;
+
+  white-space: nowrap;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.nvtooltip {
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+}
+
 /*Give tooltips that old fade in transition by
     putting a "with-transitions" class on the container div.
-*/
-.nvtooltip.with-transitions, .with-transitions .nvtooltip {
-    transition: opacity 50ms linear;
-    -moz-transition: opacity 50ms linear;
-    -webkit-transition: opacity 50ms linear;
-
-    transition-delay: 200ms;
-    -moz-transition-delay: 200ms;
-    -webkit-transition-delay: 200ms;
-}
-
-.nvtooltip.x-nvtooltip,
-.nvtooltip.y-nvtooltip {
-    padding: 8px;
-}
-
-.nvtooltip h3 {
-    margin: 0;
-    padding: 4px 14px;
-    line-height: 18px;
-    font-weight: normal;
-    background-color: rgba(247,247,247,0.75);
-    color: rgba(0,0,0,1.0);
-    text-align: center;
-
-    border-bottom: 1px solid #ebebeb;
-
-    -webkit-border-radius: 5px 5px 0 0;
-    -moz-border-radius: 5px 5px 0 0;
-    border-radius: 5px 5px 0 0;
-}
-
-.nvtooltip p {
-    margin: 0;
-    padding: 5px 14px;
-    text-align: center;
-}
-
-.nvtooltip span {
-    display: inline-block;
-    margin: 2px 0;
-}
-
-.nvtooltip table {
-    margin: 6px;
-    border-spacing:0;
-}
-
-
-.nvtooltip table td {
-    padding: 2px 9px 2px 0;
-    vertical-align: middle;
-}
-
-.nvtooltip table td.key {
-    font-weight: normal;
-}
-.nvtooltip table td.key.total {
-    font-weight: bold;
-}
-.nvtooltip table td.value {
-    text-align: right;
-    font-weight: bold;
-}
-
-.nvtooltip table td.percent {
-    color: darkgray;
-}
-
-.nvtooltip table tr.highlight td {
-    padding: 1px 9px 1px 0;
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    border-top-style: solid;
-    border-top-width: 1px;
-}
-
-.nvtooltip table td.legend-color-guide div {
-    width: 8px;
-    height: 8px;
-    vertical-align: middle;
-}
-
-.nvtooltip table td.legend-color-guide div {
-    width: 12px;
-    height: 12px;
-    border: 1px solid #999;
-}
-
-.nvtooltip .footer {
-    padding: 3px;
-    text-align: center;
-}
-
-.nvtooltip-pending-removal {
-    pointer-events: none;
-    display: none;
-}
-
-
+*/
+.nvtooltip.with-transitions,
+.with-transitions .nvtooltip {
+  transition: opacity 50ms linear;
+  -moz-transition: opacity 50ms linear;
+  -webkit-transition: opacity 50ms linear;
+
+  transition-delay: 200ms;
+  -moz-transition-delay: 200ms;
+  -webkit-transition-delay: 200ms;
+}
+
+.nvtooltip.x-nvtooltip,
+.nvtooltip.y-nvtooltip {
+  padding: 8px;
+}
+
+.nvtooltip h3 {
+  margin: 0;
+  padding: 4px 14px;
+  line-height: 18px;
+  font-weight: normal;
+  background-color: rgba(247, 247, 247, 0.75);
+  color: rgba(0, 0, 0, 1);
+  text-align: center;
+
+  border-bottom: 1px solid #ebebeb;
+
+  -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+
+.nvtooltip p {
+  margin: 0;
+  padding: 5px 14px;
+  text-align: center;
+}
+
+.nvtooltip span {
+  display: inline-block;
+  margin: 2px 0;
+}
+
+.nvtooltip table {
+  margin: 6px;
+  border-spacing: 0;
+}
+
+.nvtooltip table td {
+  padding: 2px 9px 2px 0;
+  vertical-align: middle;
+}
+
+.nvtooltip table td.key {
+  font-weight: normal;
+}
+.nvtooltip table td.key.total {
+  font-weight: bold;
+}
+.nvtooltip table td.value {
+  text-align: right;
+  font-weight: bold;
+}
+
+.nvtooltip table td.percent {
+  color: darkgray;
+}
+
+.nvtooltip table tr.highlight td {
+  padding: 1px 9px 1px 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.nvtooltip table td.legend-color-guide div {
+  width: 8px;
+  height: 8px;
+  vertical-align: middle;
+}
+
+.nvtooltip table td.legend-color-guide div {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #999;
+}
+
+.nvtooltip .footer {
+  padding: 3px;
+  text-align: center;
+}
+
+.nvtooltip-pending-removal {
+  pointer-events: none;
+  display: none;
+}
+
 /****
 Interactive Layer
-*/
-.nvd3 .nv-interactiveGuideLine {
-    pointer-events:none;
-}
-.nvd3 line.nv-guideline {
-    stroke: #ccc;
-}
+*/
+.nvd3 .nv-interactiveGuideLine {
+  pointer-events: none;
+}
+.nvd3 line.nv-guideline {
+  stroke: #ccc;
+}

services/web/frontend/stylesheets/components/pager.less

@@ -2,7 +2,6 @@
 // Pager pagination
 // --------------------------------------------------
 
-
 .pager {
   padding-left: 0;
   margin: @line-height-computed 0;
@@ -51,5 +50,4 @@
       cursor: not-allowed;
     }
   }
-
 }

services/web/frontend/stylesheets/components/pagination.less

@@ -79,10 +79,16 @@
 
 // Large
 .pagination-lg {
-  .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
+  .pagination-size(
+    @padding-large-vertical; @padding-large-horizontal; @font-size-large;
+      @border-radius-large
+  );
 }
 
 // Small
 .pagination-sm {
-  .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
+  .pagination-size(
+    @padding-small-vertical; @padding-small-horizontal; @font-size-small;
+      @border-radius-small
+  );
 }

services/web/frontend/stylesheets/components/panels.less

@@ -2,14 +2,13 @@
 // Panels
 // --------------------------------------------------
 
-
 // Base class
 .panel {
   margin-bottom: @line-height-computed;
   background-color: @panel-bg;
   border: 1px solid transparent;
   border-radius: @panel-border-radius;
-  .box-shadow(0 1px 1px rgba(0,0,0,.05));
+  .box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
 }
 
 // Panel contents
@@ -49,7 +48,6 @@
   .border-bottom-radius((@panel-border-radius - 1));
 }
 
-
 // List groups in panels
 //
 // By default, space out list group content from panel headings to account for
@@ -87,7 +85,6 @@
   }
 }
 
-
 // Tables in panels
 //
 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
@@ -186,7 +183,6 @@
   }
 }
 
-
 // Collapsable panels (aka, accordion)
 //
 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
@@ -219,23 +215,40 @@
   }
 }
 
-
 // Contextual variations
 .panel-default {
-  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
+  .panel-variant(
+    @panel-default-border; @panel-default-text; @panel-default-heading-bg;
+      @panel-default-border
+  );
 }
 .panel-primary {
-  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
+  .panel-variant(
+    @panel-primary-border; @panel-primary-text; @panel-primary-heading-bg;
+      @panel-primary-border
+  );
 }
 .panel-success {
-  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
+  .panel-variant(
+    @panel-success-border; @panel-success-text; @panel-success-heading-bg;
+      @panel-success-border
+  );
 }
 .panel-info {
-  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
+  .panel-variant(
+    @panel-info-border; @panel-info-text; @panel-info-heading-bg;
+      @panel-info-border
+  );
 }
 .panel-warning {
-  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
+  .panel-variant(
+    @panel-warning-border; @panel-warning-text; @panel-warning-heading-bg;
+      @panel-warning-border
+  );
 }
 .panel-danger {
-  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
+  .panel-variant(
+    @panel-danger-border; @panel-danger-text; @panel-danger-heading-bg;
+      @panel-danger-border
+  );
 }

services/web/frontend/stylesheets/components/popovers.less

@@ -2,7 +2,6 @@
 // Popovers
 // --------------------------------------------------
 
-
 .popover {
   position: absolute;
   top: 0;
@@ -17,16 +16,24 @@
   border: 1px solid @popover-fallback-border-color;
   border: 1px solid @popover-border-color;
   border-radius: @border-radius-large;
-  .box-shadow(0 5px 10px rgba(0,0,0,.2));
+  .box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
 
   // Overrides for proper insertion
   white-space: normal;
 
   // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -@popover-arrow-width; }
-  &.right   { margin-left: @popover-arrow-width; }
-  &.bottom  { margin-top: @popover-arrow-width; }
-  &.left    { margin-left: -@popover-arrow-width; }
+  &.top {
+    margin-top: -@popover-arrow-width;
+  }
+  &.right {
+    margin-left: @popover-arrow-width;
+  }
+  &.bottom {
+    margin-top: @popover-arrow-width;
+  }
+  &.left {
+    margin-left: -@popover-arrow-width;
+  }
 }
 
 .popover-title {
@@ -64,7 +71,7 @@
 }
 .popover > .arrow:after {
   border-width: @popover-arrow-width;
-  content: "";
+  content: '';
 }
 
 .popover {
@@ -76,7 +83,7 @@
     border-top-color: @popover-arrow-outer-color;
     bottom: -@popover-arrow-outer-width;
     &:after {
-      content: " ";
+      content: ' ';
       bottom: 1px;
       margin-left: -@popover-arrow-width;
       border-bottom-width: 0;
@@ -91,7 +98,7 @@
     border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     border-right-color: @popover-arrow-outer-color;
     &:after {
-      content: " ";
+      content: ' ';
       left: 1px;
       bottom: -@popover-arrow-width;
       border-left-width: 0;
@@ -106,7 +113,7 @@
     border-bottom-color: @popover-arrow-outer-color;
     top: -@popover-arrow-outer-width;
     &:after {
-      content: " ";
+      content: ' ';
       top: 1px;
       margin-left: -@popover-arrow-width;
       border-top-width: 0;
@@ -122,12 +129,11 @@
     border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     border-left-color: @popover-arrow-outer-color;
     &:after {
-      content: " ";
+      content: ' ';
       right: 1px;
       border-right-width: 0;
       border-left-color: @popover-arrow-color;
       bottom: -@popover-arrow-width;
     }
   }
-
 }

services/web/frontend/stylesheets/components/progress-bars.less

@@ -2,24 +2,29 @@
 // Progress bars
 // --------------------------------------------------
 
-
 // Bar animations
 // -------------------------
 
 // WebKit
 @-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
-  to    { background-position: 0 0; }
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
 }
 
 // Spec and IE10+
 @keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
-  to    { background-position: 0 0; }
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
 }
 
-
-
 // Bar itself
 // -------------------------
 
@@ -31,7 +36,7 @@
   background-color: @progress-bg;
   border-radius: @progress-border-radius;
   border: @progress-border-width solid @progress-border-color;
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+  .box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
 }
 
 // Bar of progress
@@ -45,7 +50,7 @@
   text-align: center;
   background-color: @progress-bar-bg;
   .box-shadow(@progress-bar-shadow);
-  .transition(width .6s ease);
+  .transition(width 0.6s ease);
 }
 
 // Striped bars
@@ -59,8 +64,6 @@
   .animation(progress-bar-stripes 2s linear infinite);
 }
 
-
-
 // Variations
 // -------------------------
 

services/web/frontend/stylesheets/components/tables.less

@@ -2,7 +2,6 @@
 // Tables
 // --------------------------------------------------
 
-
 table {
   max-width: 100%;
   background-color: @table-bg;
@@ -11,7 +10,6 @@ th {
   text-align: left;
 }
 
-
 // Baseline styles
 
 .table {
@@ -58,7 +56,6 @@ th {
   }
 }
 
-
 // Condensed table w/ half padding
 
 .table-condensed {
@@ -74,7 +71,6 @@ th {
   }
 }
 
-
 // Bordered version
 //
 // Add borders all around the table and between all the columns.
@@ -99,7 +95,6 @@ th {
   }
 }
 
-
 // Zebra-striping
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -113,7 +108,6 @@ th {
   }
 }
 
-
 // Hover effect
 //
 // Placed here since it has to come after the potential zebra striping
@@ -127,12 +121,11 @@ th {
   }
 }
 
-
 // Table cell sizing
 //
 // Reset default table behavior
 
-table col[class*="col-"] {
+table col[class*='col-'] {
   position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
   float: none;
   display: table-column;
@@ -140,7 +133,7 @@ table col[class*="col-"] {
 table {
   td,
   th {
-    &[class*="col-"] {
+    &[class*='col-'] {
       position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
       float: none;
       display: table-cell;
@@ -148,7 +141,6 @@ table {
   }
 }
 
-
 // Table backgrounds
 //
 // Exact selectors below required to override `.table-striped` and prevent
@@ -161,7 +153,6 @@ table {
 .table-row-variant(warning; @state-warning-bg);
 .table-row-variant(danger; @state-danger-bg);
 
-
 // Responsive tables
 //
 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
@@ -227,7 +218,6 @@ table {
           }
         }
       }
-
     }
   }
 }

services/web/frontend/stylesheets/components/tabs.less

@@ -1,7 +1,7 @@
 .ol-tabs {
   // Overrides for nav.less
   .nav-tabs {
-    border: 0!important;
+    border: 0 !important;
     margin-bottom: 0;
     margin-top: -@line-height-computed; //- adjusted for portal-name
     padding: @padding-lg 0 @padding-md;
@@ -14,8 +14,9 @@
     a {
       border: 0;
       color: @link-color-alt;
-      &:focus, &:hover {
-        background-color: transparent!important;
+      &:focus,
+      &:hover {
+        background-color: transparent !important;
         border: 0;
         color: @link-hover-color-alt;
       }
@@ -23,8 +24,8 @@
   }
 
   li.active > a {
-    background-color: transparent!important;
-    border: 0!important;
+    background-color: transparent !important;
+    border: 0 !important;
     border-bottom: 1px solid @accent-color-secondary!important;
     color: @accent-color-secondary!important;
     &:hover {
@@ -33,7 +34,7 @@
     }
   }
   .tab-content:extend(.container) {
-    background-color: transparent!important;
-    border: none!important;
+    background-color: transparent !important;
+    border: none !important;
   }
 }

services/web/frontend/stylesheets/components/tags-input.less

@@ -1,7 +1,9 @@
 tags-input {
   display: block;
 }
-tags-input *, tags-input *:before, tags-input *:after {
+tags-input *,
+tags-input *:before,
+tags-input *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -86,8 +88,18 @@ tags-input[disabled] .tags {
 }
 tags-input[disabled] .tags .tag-item {
   opacity: 0.65;
-  background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
-  background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
+  background: -webkit-linear-gradient(
+    top,
+    #f0f9ff 0%,
+    rgba(203, 235, 255, 0.75) 47%,
+    rgba(161, 219, 255, 0.62) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    #f0f9ff 0%,
+    rgba(203, 235, 255, 0.75) 47%,
+    rgba(161, 219, 255, 0.62) 100%
+  );
 }
 tags-input[disabled] .tags .tag-item .remove-button {
   cursor: default;
@@ -131,7 +143,7 @@ tags-input .autocomplete .suggestion-item.selected {
   color: white;
   background-color: @brand-primary;
   .subdued {
-	  color: white;
+    color: white;
   }
 }
 tags-input .autocomplete .suggestion-item em {

services/web/frontend/stylesheets/components/theme.less

@@ -1,12 +1,9 @@
-
 //
 // Load core variables and mixins
 // --------------------------------------------------
 
-@import "variables.less";
-@import "mixins.less";
-
-
+@import 'variables.less';
+@import 'mixins.less';
 
 //
 // Buttons
@@ -19,26 +16,30 @@
 .btn-info,
 .btn-warning,
 .btn-danger {
-  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 1px 1px rgba(0, 0, 0, 0.075);
   .box-shadow(@shadow);
 
   // Reset the shadow
   &:active,
   &.active {
-    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
   }
 }
 
 // Mixin for generating new styles
 .btn-styles(@btn-color: #555) {
-  #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
-  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
+  #gradient >
+    .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
+  .reset-filter(
+
+  ); // Disable gradients for IE9 because filter bleeds through rounded corners
   background-repeat: repeat-x;
   border-color: darken(@btn-color, 14%);
 
   &:hover,
-  &:focus  {
+  &:focus {
     background-color: darken(@btn-color, 12%);
     background-position: 0 -15px;
   }
@@ -60,14 +61,26 @@
 }
 
 // Apply the mixin to the buttons
-.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
-.btn-primary { .btn-styles(@btn-primary-bg); }
-.btn-success { .btn-styles(@btn-success-bg); }
-.btn-info    { .btn-styles(@btn-info-bg); }
-.btn-warning { .btn-styles(@btn-warning-bg); }
-.btn-danger  { .btn-styles(@btn-danger-bg); }
-
-
+.btn-default {
+  .btn-styles(@btn-default-bg);
+  text-shadow: 0 1px 0 #fff;
+  border-color: #ccc;
+}
+.btn-primary {
+  .btn-styles(@btn-primary-bg);
+}
+.btn-success {
+  .btn-styles(@btn-success-bg);
+}
+.btn-info {
+  .btn-styles(@btn-info-bg);
+}
+.btn-warning {
+  .btn-styles(@btn-warning-bg);
+}
+.btn-danger {
+  .btn-styles(@btn-danger-bg);
+}
 
 //
 // Images
@@ -75,64 +88,89 @@
 
 .thumbnail,
 .img-thumbnail {
-  .box-shadow(0 1px 2px rgba(0,0,0,.075));
+  .box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
 }
 
-
-
 //
 // Dropdowns
 // --------------------------------------------------
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-  #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+  #gradient >
+    .vertical(
+      @start-color: @dropdown-link-hover-bg; @end-color:
+        darken(@dropdown-link-hover-bg, 5%)
+    );
   background-color: darken(@dropdown-link-hover-bg, 5%);
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+  #gradient >
+    .vertical(
+      @start-color: @dropdown-link-active-bg; @end-color:
+        darken(@dropdown-link-active-bg, 5%)
+    );
   background-color: darken(@dropdown-link-active-bg, 5%);
 }
 
-
-
 //
 // Navbar
 // --------------------------------------------------
 
 // Default navbar
 .navbar-default {
-  #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
-  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
+  #gradient >
+    .vertical(
+      @start-color: lighten(@navbar-default-bg, 10%) ; @end-color:
+        @navbar-default-bg
+    );
+  .reset-filter(
+
+  ); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
   border-radius: @navbar-border-radius;
-  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
+  @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 1px 5px rgba(0, 0, 0, 0.075);
   .box-shadow(@shadow);
 
   .navbar-nav > .active > a {
-    #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
-    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
+    #gradient >
+      .vertical(
+        @start-color: darken(@navbar-default-bg, 5%) ; @end-color:
+          darken(@navbar-default-bg, 2%)
+      );
+    .box-shadow(inset 0 3px 9px rgba(0, 0, 0, 0.075));
   }
 }
 .navbar-brand,
 .navbar-nav > li > a {
-  text-shadow: 0 1px 0 rgba(255,255,255,.25);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 
 // Inverted navbar
 .navbar-inverse {
-  #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
-  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
+  #gradient >
+    .vertical(
+      @start-color: lighten(@navbar-inverse-bg, 10%) ; @end-color:
+        @navbar-inverse-bg
+    );
+  .reset-filter(
+
+  ); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
 
   .navbar-nav > .active > a {
-    #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
-    .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
+    #gradient >
+      .vertical(
+        @start-color: @navbar-inverse-bg; @end-color:
+          lighten(@navbar-inverse-bg, 2.5%)
+      );
+    .box-shadow(inset 0 3px 9px rgba(0, 0, 0, 0.25));
   }
 
   .navbar-brand,
   .navbar-nav > li > a {
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   }
 }
 
@@ -143,16 +181,15 @@
   border-radius: 0;
 }
 
-
-
 //
 // Alerts
 // --------------------------------------------------
 
 // Common styles
 .alert {
-  text-shadow: 0 1px 0 rgba(255,255,255,.2);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
+    0 1px 2px rgba(0, 0, 0, 0.05);
   .box-shadow(@shadow);
 }
 
@@ -163,12 +200,18 @@
 }
 
 // Apply the mixin to the alerts
-.alert-success    { .alert-styles(@alert-success-bg); }
-.alert-info       { .alert-styles(@alert-info-bg); }
-.alert-warning    { .alert-styles(@alert-warning-bg); }
-.alert-danger     { .alert-styles(@alert-danger-bg); }
-
-
+.alert-success {
+  .alert-styles(@alert-success-bg);
+}
+.alert-info {
+  .alert-styles(@alert-info-bg);
+}
+.alert-warning {
+  .alert-styles(@alert-warning-bg);
+}
+.alert-danger {
+  .alert-styles(@alert-danger-bg);
+}
 
 //
 // Progress bars
@@ -176,7 +219,8 @@
 
 // Give the progress background some depth
 .progress {
-  #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
+  #gradient >
+    .vertical(@start-color: darken(@progress-bg, 4%) ; @end-color: @progress-bg);
 }
 
 // Mixin for generating new styles
@@ -185,13 +229,21 @@
 }
 
 // Apply the mixin to the progress bars
-.progress-bar            { .progress-bar-styles(@progress-bar-bg); }
-.progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
-.progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
-.progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
-.progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }
-
-
+.progress-bar {
+  .progress-bar-styles(@progress-bar-bg);
+}
+.progress-bar-success {
+  .progress-bar-styles(@progress-bar-success-bg);
+}
+.progress-bar-info {
+  .progress-bar-styles(@progress-bar-info-bg);
+}
+.progress-bar-warning {
+  .progress-bar-styles(@progress-bar-warning-bg);
+}
+.progress-bar-danger {
+  .progress-bar-styles(@progress-bar-danger-bg);
+}
 
 //
 // List groups
@@ -199,25 +251,27 @@
 
 .list-group {
   border-radius: @border-radius-base;
-  .box-shadow(0 1px 2px rgba(0,0,0,.075));
+  .box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
 }
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
   text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
-  #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
+  #gradient >
+    .vertical(
+      @start-color: @list-group-active-bg; @end-color:
+        darken(@list-group-active-bg, 7.5%)
+    );
   border-color: darken(@list-group-active-border, 7.5%);
 }
 
-
-
 //
 // Panels
 // --------------------------------------------------
 
 // Common styles
 .panel {
-  .box-shadow(0 1px 2px rgba(0,0,0,.05));
+  .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
 }
 
 // Mixin for generating new styles
@@ -226,22 +280,33 @@
 }
 
 // Apply the mixin to the panel headings only
-.panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
-.panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
-.panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
-.panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
-.panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
-.panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }
-
-
+.panel-default > .panel-heading {
+  .panel-heading-styles(@panel-default-heading-bg);
+}
+.panel-primary > .panel-heading {
+  .panel-heading-styles(@panel-primary-heading-bg);
+}
+.panel-success > .panel-heading {
+  .panel-heading-styles(@panel-success-heading-bg);
+}
+.panel-info > .panel-heading {
+  .panel-heading-styles(@panel-info-heading-bg);
+}
+.panel-warning > .panel-heading {
+  .panel-heading-styles(@panel-warning-heading-bg);
+}
+.panel-danger > .panel-heading {
+  .panel-heading-styles(@panel-danger-heading-bg);
+}
 
 //
 // Wells
 // --------------------------------------------------
 
 .well {
-  #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
+  #gradient >
+    .vertical(@start-color: darken(@well-bg, 5%) ; @end-color: @well-bg);
   border-color: darken(@well-bg, 10%);
-  @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
+  @shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
   .box-shadow(@shadow);
 }

services/web/frontend/stylesheets/components/thumbnails.less

@@ -2,7 +2,6 @@
 // Thumbnails
 // --------------------------------------------------
 
-
 // Mixin and adjust the regular image class
 .thumbnail {
   display: block;
@@ -12,7 +11,7 @@
   background-color: @thumbnail-bg;
   border: 1px solid @thumbnail-border;
   border-radius: @thumbnail-border-radius;
-  .transition(all .2s ease-in-out);
+  .transition(all 0.2s ease-in-out);
 
   > img,
   a > img {

services/web/frontend/stylesheets/components/tooltip.less

@@ -2,7 +2,6 @@
 // Tooltips
 // --------------------------------------------------
 
-
 // Base class
 .tooltip {
   position: absolute;
@@ -13,11 +12,25 @@
   line-height: 1.4;
   .opacity(0);
 
-  &.in     { .opacity(@tooltip-opacity); }
-  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
-  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
-  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
-  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+  &.in {
+    .opacity(@tooltip-opacity);
+  }
+  &.top {
+    margin-top: -3px;
+    padding: @tooltip-arrow-width 0;
+  }
+  &.right {
+    margin-left: 3px;
+    padding: 0 @tooltip-arrow-width;
+  }
+  &.bottom {
+    margin-top: 3px;
+    padding: @tooltip-arrow-width 0;
+  }
+  &.left {
+    margin-left: -3px;
+    padding: 0 @tooltip-arrow-width;
+  }
 }
 
 // Wrapper for the tooltip content
@@ -63,14 +76,16 @@
     top: 50%;
     left: 0;
     margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width
+      0;
     border-right-color: @tooltip-arrow-color;
   }
   &.left .tooltip-arrow {
     top: 50%;
     right: 0;
     margin-top: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width
+      @tooltip-arrow-width;
     border-left-color: @tooltip-arrow-color;
   }
   &.bottom .tooltip-arrow {

services/web/frontend/stylesheets/components/ui-select.less

@@ -1,63 +1,64 @@
 .ui-select-bootstrap > .ui-select-choices,
 .ui-select-bootstrap > .ui-select-no-choice {
-	width: auto;
-	max-width: 400px;
+  width: auto;
+  max-width: 400px;
 }
 
 .dropdown-menu .ui-select-choices-row {
-	padding: 4px 0;
+  padding: 4px 0;
 
-	> .ui-select-choices-row-inner {
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
+  > .ui-select-choices-row-inner {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .ui-select-placeholder,
 .ui-select-match-text {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: normal;
 }
 
 .ui-select-bootstrap {
-	&:focus {
-		outline: none;
-	}
-	> .ui-select-match  {
-		&:focus {
-			outline: none;
-		}
-		&.btn-default-focus {
-			outline: 0;
-			box-shadow: none;
-			background-color: transparent;
-			> .btn {
-				border-color: @input-border-focus;
-				box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px fade(@input-border-focus, 60%);
-				padding-top: @input-suggestion-v-offset;
-			}
-		}
-		> .btn {
-			color: @input-color;
-			background-color: @input-bg;
-			border: 1px solid @input-border;
-			padding-top: @input-suggestion-v-offset;
-			&[disabled] {
-				cursor: not-allowed;
-				background-color: @input-bg-disabled;
-				opacity: 1;
-			}
-		}
-	}
+  &:focus {
+    outline: none;
+  }
+  > .ui-select-match {
+    &:focus {
+      outline: none;
+    }
+    &.btn-default-focus {
+      outline: 0;
+      box-shadow: none;
+      background-color: transparent;
+      > .btn {
+        border-color: @input-border-focus;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          0 0 8px fade(@input-border-focus, 60%);
+        padding-top: @input-suggestion-v-offset;
+      }
+    }
+    > .btn {
+      color: @input-color;
+      background-color: @input-bg;
+      border: 1px solid @input-border;
+      padding-top: @input-suggestion-v-offset;
+      &[disabled] {
+        cursor: not-allowed;
+        background-color: @input-bg-disabled;
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .ui-select-container[tagging] {
-	.ui-select-toggle {
-		cursor: text;
-		padding-top: @input-suggestion-v-offset;
-		> i.caret.pull-right {
-			display: none;
-		}
-	}
-}
+  .ui-select-toggle {
+    cursor: text;
+    padding-top: @input-suggestion-v-offset;
+    > i.caret.pull-right {
+      display: none;
+    }
+  }
+}

services/web/frontend/stylesheets/components/wells.less

@@ -2,7 +2,6 @@
 // Wells
 // --------------------------------------------------
 
-
 // Base class
 .well {
   min-height: 20px;
@@ -11,10 +10,10 @@
   background-color: @well-bg;
   border: 1px solid @well-border;
   border-radius: @border-radius-base;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
   blockquote {
     border-color: #ddd;
-    border-color: rgba(0,0,0,.15);
+    border-color: rgba(0, 0, 0, 0.15);
   }
 }
 

services/web/frontend/stylesheets/core/accessibility.less

@@ -8,7 +8,7 @@
 
 // <del> styling taken from:
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#Accessibility_concerns
-del::before, 
+del::before,
 del::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -19,9 +19,9 @@ del::after {
   width: 1px;
 }
 del::before {
-  content: " [deletion start] ";
+  content: ' [deletion start] ';
 }
 
 del::after {
-  content: " [deletion end] ";
-}
+  content: ' [deletion end] ';
+}

services/web/frontend/stylesheets/core/grid.less

@@ -2,7 +2,6 @@
 // Grid system
 // --------------------------------------------------
 
-
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
@@ -21,7 +20,6 @@
   }
 }
 
-
 // Fluid container
 //
 // Utilizes the mixin meant for fixed width containers, but without any defined
@@ -31,7 +29,6 @@
   .container-fixed();
 }
 
-
 // Row
 //
 // Rows contain and clear the floats of your columns.
@@ -40,14 +37,12 @@
   .make-row();
 }
 
-
 // Columns
 //
 // Common styles for small and large grid columns
 
 .make-grid-columns();
 
-
 // Extra small grid
 //
 // Columns, offsets, pushes, and pulls for extra small devices like
@@ -55,7 +50,6 @@
 
 .make-grid(xs);
 
-
 // Small grid
 //
 // Columns, offsets, pushes, and pulls for the small device range, from phones
@@ -65,7 +59,6 @@
   .make-grid(sm);
 }
 
-
 // Medium grid
 //
 // Columns, offsets, pushes, and pulls for the desktop device range.
@@ -74,7 +67,6 @@
   .make-grid(md);
 }
 
-
 // Large grid
 //
 // Columns, offsets, pushes, and pulls for the large desktop device range.

services/web/frontend/stylesheets/core/mixins.less

@@ -2,7 +2,6 @@
 // Mixins
 // --------------------------------------------------
 
-
 // Utilities
 // -------------------------
 
@@ -19,7 +18,7 @@
 .clearfix() {
   &:before,
   &:after {
-    content: " "; // 1
+    content: ' '; // 1
     display: table; // 2
   }
   &:after {
@@ -54,10 +53,16 @@
 
 // Placeholder text
 .placeholder(@color: @input-color-placeholder) {
-  &::-moz-placeholder           { color: @color;   // Firefox
-                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
-  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
-  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+  &::-moz-placeholder {
+    color: @color; // Firefox
+    opacity: 1;
+  } // See https://github.com/twbs/bootstrap/pull/11526
+  &:-ms-input-placeholder {
+    color: @color;
+  } // Internet Explorer 10+
+  &::-webkit-input-placeholder {
+    color: @color;
+  } // Safari and Chrome
 }
 
 // Text overflow
@@ -79,7 +84,7 @@
 
 // Deprecated as of v3.0.1 (will be removed in v4)
 .hide-text() {
-  font: ~"0/0" a;
+  font: ~'0/0' a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
@@ -90,27 +95,25 @@
   .hide-text();
 }
 
-
-
 // CSS3 PROPERTIES
 // --------------------------------------------------
 
 // Single side border-radius
 .border-top-radius(@radius) {
   border-top-right-radius: @radius;
-   border-top-left-radius: @radius;
+  border-top-left-radius: @radius;
 }
 .border-right-radius(@radius) {
   border-bottom-right-radius: @radius;
-     border-top-right-radius: @radius;
+  border-top-right-radius: @radius;
 }
 .border-bottom-radius(@radius) {
   border-bottom-right-radius: @radius;
-   border-bottom-left-radius: @radius;
+  border-bottom-left-radius: @radius;
 }
 .border-left-radius(@radius) {
   border-bottom-left-radius: @radius;
-     border-top-left-radius: @radius;
+  border-top-left-radius: @radius;
 }
 
 // Drop shadows
@@ -120,139 +123,139 @@
 //   standard `box-shadow` property.
 .box-shadow(@shadow) {
   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
-          box-shadow: @shadow;
+  box-shadow: @shadow;
 }
 
 // Transitions
 .transition(@transition) {
   -webkit-transition: @transition;
-          transition: @transition;
+  transition: @transition;
 }
 .transition-property(@transition-property) {
   -webkit-transition-property: @transition-property;
-          transition-property: @transition-property;
+  transition-property: @transition-property;
 }
 .transition-delay(@transition-delay) {
   -webkit-transition-delay: @transition-delay;
-          transition-delay: @transition-delay;
+  transition-delay: @transition-delay;
 }
 .transition-duration(@transition-duration) {
   -webkit-transition-duration: @transition-duration;
-          transition-duration: @transition-duration;
+  transition-duration: @transition-duration;
 }
 .transition-transform(@transition) {
   -webkit-transition: -webkit-transform @transition;
-     -moz-transition: -moz-transform @transition;
-       -o-transition: -o-transform @transition;
-          transition: transform @transition;
+  -moz-transition: -moz-transform @transition;
+  -o-transition: -o-transform @transition;
+  transition: transform @transition;
 }
 
 // Transformations
 .rotate(@degrees) {
   -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees); // IE9 only
-          transform: rotate(@degrees);
+  -ms-transform: rotate(@degrees); // IE9 only
+  transform: rotate(@degrees);
 }
 .scale(@ratio; @ratio-y...) {
   -webkit-transform: scale(@ratio, @ratio-y);
-      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
-          transform: scale(@ratio, @ratio-y);
+  -ms-transform: scale(@ratio, @ratio-y); // IE9 only
+  transform: scale(@ratio, @ratio-y);
 }
 .translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y); // IE9 only
-          transform: translate(@x, @y);
+  -ms-transform: translate(@x, @y); // IE9 only
+  transform: translate(@x, @y);
 }
 .skew(@x; @y) {
   -webkit-transform: skew(@x, @y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-          transform: skew(@x, @y);
+  -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+  transform: skew(@x, @y);
 }
 .translate3d(@x; @y; @z) {
   -webkit-transform: translate3d(@x, @y, @z);
-          transform: translate3d(@x, @y, @z);
+  transform: translate3d(@x, @y, @z);
 }
 
 .rotateX(@degrees) {
   -webkit-transform: rotateX(@degrees);
-      -ms-transform: rotateX(@degrees); // IE9 only
-          transform: rotateX(@degrees);
+  -ms-transform: rotateX(@degrees); // IE9 only
+  transform: rotateX(@degrees);
 }
 .rotateY(@degrees) {
   -webkit-transform: rotateY(@degrees);
-      -ms-transform: rotateY(@degrees); // IE9 only
-          transform: rotateY(@degrees);
+  -ms-transform: rotateY(@degrees); // IE9 only
+  transform: rotateY(@degrees);
 }
 .perspective(@perspective) {
   -webkit-perspective: @perspective;
-     -moz-perspective: @perspective;
-          perspective: @perspective;
+  -moz-perspective: @perspective;
+  perspective: @perspective;
 }
 .perspective-origin(@perspective) {
   -webkit-perspective-origin: @perspective;
-     -moz-perspective-origin: @perspective;
-          perspective-origin: @perspective;
+  -moz-perspective-origin: @perspective;
+  perspective-origin: @perspective;
 }
 .transform-origin(@origin) {
   -webkit-transform-origin: @origin;
-     -moz-transform-origin: @origin;
-      -ms-transform-origin: @origin; // IE9 only
-          transform-origin: @origin;
+  -moz-transform-origin: @origin;
+  -ms-transform-origin: @origin; // IE9 only
+  transform-origin: @origin;
 }
 
 // Animations
 .animation(@animation) {
   -webkit-animation: @animation;
-          animation: @animation;
+  animation: @animation;
 }
 .animation-name(@name) {
   -webkit-animation-name: @name;
-          animation-name: @name;
+  animation-name: @name;
 }
 .animation-duration(@duration) {
   -webkit-animation-duration: @duration;
-          animation-duration: @duration;
+  animation-duration: @duration;
 }
 .animation-timing-function(@timing-function) {
   -webkit-animation-timing-function: @timing-function;
-          animation-timing-function: @timing-function;
+  animation-timing-function: @timing-function;
 }
 .animation-delay(@delay) {
   -webkit-animation-delay: @delay;
-          animation-delay: @delay;
+  animation-delay: @delay;
 }
 .animation-iteration-count(@iteration-count) {
   -webkit-animation-iteration-count: @iteration-count;
-          animation-iteration-count: @iteration-count;
+  animation-iteration-count: @iteration-count;
 }
 .animation-direction(@direction) {
   -webkit-animation-direction: @direction;
-          animation-direction: @direction;
+  animation-direction: @direction;
 }
 
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
-.backface-visibility(@visibility){
+.backface-visibility(@visibility) {
   -webkit-backface-visibility: @visibility;
-     -moz-backface-visibility: @visibility;
-          backface-visibility: @visibility;
+  -moz-backface-visibility: @visibility;
+  backface-visibility: @visibility;
 }
 
 // Box sizing
 .box-sizing(@boxmodel) {
   -webkit-box-sizing: @boxmodel;
-     -moz-box-sizing: @boxmodel;
-          box-sizing: @boxmodel;
+  -moz-box-sizing: @boxmodel;
+  box-sizing: @boxmodel;
 }
 
 // User select
 // For selecting text on the page
 .user-select(@select) {
   -webkit-user-select: @select;
-     -moz-user-select: @select;
-      -ms-user-select: @select; // IE10+
-          user-select: @select;
+  -moz-user-select: @select;
+  -ms-user-select: @select; // IE10+
+  user-select: @select;
 }
 
 // Resize anything
@@ -264,21 +267,21 @@
 // CSS3 Content Columns
 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
   -webkit-column-count: @column-count;
-     -moz-column-count: @column-count;
-          column-count: @column-count;
+  -moz-column-count: @column-count;
+  column-count: @column-count;
   -webkit-column-gap: @column-gap;
-     -moz-column-gap: @column-gap;
-          column-gap: @column-gap;
+  -moz-column-gap: @column-gap;
+  column-gap: @column-gap;
 }
 
 // Optional hyphenation
 .hyphens(@mode: auto) {
   word-wrap: break-word;
   -webkit-hyphens: @mode;
-     -moz-hyphens: @mode;
-      -ms-hyphens: @mode; // IE10+
-       -o-hyphens: @mode;
-          hyphens: @mode;
+  -moz-hyphens: @mode;
+  -ms-hyphens: @mode; // IE10+
+  -o-hyphens: @mode;
+  hyphens: @mode;
 }
 
 // Opacity
@@ -286,25 +289,36 @@
   opacity: @opacity;
   // IE8 filter
   @opacity-ie: (@opacity * 100);
-  filter: ~"alpha(opacity=@{opacity-ie})";
+  filter: ~'alpha(opacity=@{opacity-ie})';
 }
 
-
-
 // GRADIENTS
 // --------------------------------------------------
 
 #gradient {
-
   // Horizontal gradient, from left to right
   //
   // Creates two color stops, start and end, by specifying a color and position for each color stop.
   // Color stops are not available in IE9 and below.
   .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
-    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
-    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-image: -webkit-linear-gradient(
+      left,
+      color-stop(@start-color @start-percent),
+      color-stop(@end-color @end-percent)
+    ); // Safari 5.1-6, Chrome 10+
+    background-image: linear-gradient(
+      to right,
+      @start-color @start-percent,
+      @end-color @end-percent
+    ); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down
   }
 
   // Vertical gradient, from top to bottom
@@ -312,37 +326,111 @@
   // Creates two color stops, start and end, by specifying a color and position for each color stop.
   // Color stops are not available in IE9 and below.
   .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
-    background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);  // Safari 5.1-6, Chrome 10+
-    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-image: -webkit-linear-gradient(
+      top,
+      @start-color @start-percent,
+      @end-color @end-percent
+    ); // Safari 5.1-6, Chrome 10+
+    background-image: linear-gradient(
+      to bottom,
+      @start-color @start-percent,
+      @end-color @end-percent
+    ); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down
   }
 
   .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
     background-repeat: repeat-x;
-    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
-    background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-image: -webkit-linear-gradient(
+      @deg,
+      @start-color,
+      @end-color
+    ); // Safari 5.1-6, Chrome 10+
+    background-image: linear-gradient(
+      @deg,
+      @start-color,
+      @end-color
+    ); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
   }
   .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
-    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
-    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
+    background-image: -webkit-linear-gradient(
+      left,
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: linear-gradient(
+      to right,
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
     background-repeat: no-repeat;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down, gets no color-stop at all for proper fallback
   }
   .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
-    background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
-    background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
+    background-image: -webkit-linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
+    background-image: linear-gradient(
+      @start-color,
+      @mid-color @color-stop,
+      @end-color
+    );
     background-repeat: no-repeat;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
+    filter: e(
+      %(
+        "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
+        argb(@start-color),
+        argb(@end-color)
+      )
+    ); // IE9 and down, gets no color-stop at all for proper fallback
   }
   .radial(@inner-color: #555; @outer-color: #333) {
-    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
+    background-image: -webkit-radial-gradient(
+      circle,
+      @inner-color,
+      @outer-color
+    );
     background-image: radial-gradient(circle, @inner-color, @outer-color);
     background-repeat: no-repeat;
   }
-  .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
-    background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
-    background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+  .striped(@color: rgba(255,255,255,0.15); @angle: 45deg) {
+    background-image: -webkit-linear-gradient(
+      @angle,
+      @color 25%,
+      transparent 25%,
+      transparent 50%,
+      @color 50%,
+      @color 75%,
+      transparent 75%,
+      transparent
+    );
+    background-image: linear-gradient(
+      @angle,
+      @color 25%,
+      transparent 25%,
+      transparent 50%,
+      @color 50%,
+      @color 75%,
+      transparent 75%,
+      transparent
+    );
   }
 }
 
@@ -351,31 +439,27 @@
 // When you need to remove a gradient background, do not forget to use this to reset
 // the IE filter for IE9 and below.
 .reset-filter() {
-  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+  filter: e(%('progid:DXImageTransform.Microsoft.gradient(enabled = false)'));
 }
 
-
-
 // Retina images
 //
 // Short retina mixin for setting background-image and -size
 
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
-  background-image: url("@{file-1x}");
-
-  @media
-  only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (   min--moz-device-pixel-ratio: 2),
-  only screen and (     -o-min-device-pixel-ratio: 2/1),
-  only screen and (        min-device-pixel-ratio: 2),
-  only screen and (                min-resolution: 192dpi),
-  only screen and (                min-resolution: 2dppx) {
-    background-image: url("@{file-2x}");
+  background-image: url('@{file-1x}');
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    background-image: url('@{file-2x}');
     background-size: @width-1x @height-1x;
   }
 }
 
-
 // Responsive image
 //
 // Keep images from scaling beyond the width of their parents.
@@ -386,7 +470,6 @@
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 }
 
-
 // COMPONENT MIXINS
 // --------------------------------------------------
 
@@ -439,17 +522,20 @@
     display: inline-block;
     font-weight: bold;
     text-decoration: none;
-    .button-variant(#FFF, shade(@background, 20%), transparent);
-    .button-size(@padding-xs-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+    .button-variant(#fff, shade(@background, 20%), transparent);
+    .button-size(
+      @padding-xs-vertical; @padding-small-horizontal; @font-size-small;
+        @line-height-small; @btn-border-radius-small
+    );
     &:hover {
       text-decoration: none;
     }
   }
 
   small,
-   .small {
-     color: @text-color;
-   }
+  .small {
+    color: @text-color;
+  }
 }
 
 // Tables
@@ -490,7 +576,9 @@
     a& {
       color: @color;
 
-      .list-group-item-heading { color: inherit; }
+      .list-group-item-heading {
+        color: inherit;
+      }
 
       &:hover,
       &:focus {
@@ -518,7 +606,7 @@
   border-color: @border;
 
   .alert & when (@is-overleaf = true) {
-      background-color: darken(@background, 16%);
+    background-color: darken(@background, 16%);
   }
 
   &:hover,
@@ -529,10 +617,10 @@
   .open .dropdown-toggle& {
     color: @color;
     background-color: darken(@background, 8%);
-        border-color: darken(@border, 12%);
-      .alert & when (@is-overleaf = true) {
-          background-color: darken(@background, 24%);
-      }
+    border-color: darken(@border, 12%);
+    .alert & when (@is-overleaf = true) {
+      background-color: darken(@background, 24%);
+    }
   }
   &:active,
   &.active,
@@ -548,7 +636,7 @@
     &:active,
     &.active {
       background-color: @background;
-          border-color: @border;
+      border-color: @border;
     }
   }
 
@@ -690,17 +778,22 @@
 // More easily include all the states for responsive-utilities.less.
 .responsive-visibility() {
   display: block !important;
-  table&  { display: table; }
-  tr&     { display: table-row !important; }
+  table& {
+    display: table;
+  }
+  tr& {
+    display: table-row !important;
+  }
   th&,
-  td&     { display: table-cell !important; }
+  td& {
+    display: table-cell !important;
+  }
 }
 
 .responsive-invisibility() {
   display: none !important;
 }
 
-
 // Grid System
 // -----------
 
@@ -708,14 +801,14 @@
 .container-fixed() {
   margin-right: auto;
   margin-left: auto;
-  padding-left:  (@grid-gutter-width / 2);
+  padding-left: (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
   &:extend(.clearfix all);
 }
 
 // Creates a wrapper for a series of columns
 .make-row(@gutter: @grid-gutter-width) {
-  margin-left:  (@gutter / -2);
+  margin-left: (@gutter / -2);
   margin-right: (@gutter / -2);
   &:extend(.clearfix all);
 }
@@ -726,7 +819,7 @@
   float: left;
   width: percentage((@columns / @grid-columns));
   min-height: 1px;
-  padding-left:  (@gutter / 2);
+  padding-left: (@gutter / 2);
   padding-right: (@gutter / 2);
 }
 .make-xs-column-offset(@columns) {
@@ -745,12 +838,11 @@
   }
 }
 
-
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left:  (@gutter / 2);
+  padding-left: (@gutter / 2);
   padding-right: (@gutter / 2);
 
   @media (min-width: @screen-sm-min) {
@@ -774,12 +866,11 @@
   }
 }
 
-
 // Generate the medium columns
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left:  (@gutter / 2);
+  padding-left: (@gutter / 2);
   padding-right: (@gutter / 2);
 
   @media (min-width: @screen-md-min) {
@@ -803,12 +894,11 @@
   }
 }
 
-
 // Generate the large columns
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left:  (@gutter / 2);
+  padding-left: (@gutter / 2);
   padding-right: (@gutter / 2);
 
   @media (min-width: @screen-lg-min) {
@@ -832,7 +922,6 @@
   }
 }
 
-
 // Framework grid generation
 //
 // Used only by Bootstrap to generate the correct number of grid classes given
@@ -840,21 +929,24 @@
 
 .make-grid-columns() {
   // Common styles for all sizes of grid columns, widths 1-12
-  .col(@index) when (@index = 1) { // initial
-    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+  .col(@index) when (@index = 1) {
+    // initial
+    @item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}';
     .col((@index + 1), @item);
   }
-  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
-    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
-    .col((@index + 1), ~"@{list}, @{item}");
+  .col(@index, @list) when (@index =< @grid-columns) {
+    // general; "=<" isn't a typo
+    @item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}';
+    .col((@index + 1), ~'@{list}, @{item}');
   }
-  .col(@index, @list) when (@index > @grid-columns) { // terminal
+  .col(@index, @list) when (@index > @grid-columns) {
+    // terminal
     @{list} {
       position: relative;
       // Prevent columns from collapsing when empty
       min-height: 1px;
       // Inner gutter via padding
-      padding-left:  (@grid-gutter-width / 2);
+      padding-left: (@grid-gutter-width / 2);
       padding-right: (@grid-gutter-width / 2);
     }
   }
@@ -862,15 +954,18 @@
 }
 
 .float-grid-columns(@class) {
-  .col(@index) when (@index = 1) { // initial
-    @item: ~".col-@{class}-@{index}";
+  .col(@index) when (@index = 1) {
+    // initial
+    @item: ~'.col-@{class}-@{index}';
     .col((@index + 1), @item);
   }
-  .col(@index, @list) when (@index =< @grid-columns) { // general
-    @item: ~".col-@{class}-@{index}";
-    .col((@index + 1), ~"@{list}, @{item}");
+  .col(@index, @list) when (@index =< @grid-columns) {
+    // general
+    @item: ~'.col-@{class}-@{index}';
+    .col((@index + 1), ~'@{list}, @{item}');
   }
-  .col(@index, @list) when (@index > @grid-columns) { // terminal
+  .col(@index, @list) when (@index > @grid-columns) {
+    // terminal
     @{list} {
       float: left;
     }
@@ -927,16 +1022,19 @@
   .radio,
   .checkbox,
   .radio-inline,
-  .checkbox-inline  {
+  .checkbox-inline {
     color: @text-color;
   }
   // Set the border and box shadow on specific inputs to match
   .form-control {
     border-color: @border-color;
-    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    .box-shadow(
+      inset 0 1px 1px rgba(0, 0, 0, 0.075)
+    ); // Redeclare so transitions work
     &:focus {
       border-color: darken(@border-color, 10%);
-      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+        0 0 6px lighten(@border-color, 20%);
       .box-shadow(@shadow);
     }
   }
@@ -966,11 +1064,11 @@
 // contrast against a dark gray background.
 
 .form-control-focus(@color: @input-border-focus) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
   &:focus {
     border-color: @color;
     outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+    .box-shadow(~'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}');
   }
 }
 

services/web/frontend/stylesheets/core/normalize.less

@@ -327,8 +327,8 @@ input {
 // 2. Remove excess padding in IE 8/9/10.
 //
 
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
   box-sizing: border-box; // 1
   padding: 0; // 2
 }
@@ -339,8 +339,8 @@ input[type="radio"] {
 // decrement button to change from `default` to `text`.
 //
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -350,7 +350,7 @@ input[type="number"]::-webkit-outer-spin-button {
 //    (include `-moz` to future-proof).
 //
 
-input[type="search"] {
+input[type='search'] {
   -webkit-appearance: textfield; // 1
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; // 2
@@ -363,8 +363,8 @@ input[type="search"] {
 // padding (and `textfield` appearance).
 //
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -420,4 +420,4 @@ table {
 td,
 th {
   padding: 0;
-}
+}