Refactor toolbar variants as mixins.

services/web/app/views/project/editor/file-tree.pug

@@ -1,5 +1,5 @@
 aside#file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }").full-size
-	.toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write")
+	.toolbar.toolbar-filetree(ng-if="permissions.write")
 		a(
 			href,
 			ng-click="openNewDocModal()",

services/web/app/views/project/editor/pdf.pug

@@ -1,5 +1,5 @@
 div.full-size.pdf(ng-controller="PdfController")
-	.toolbar.toolbar-tall
+	.toolbar.toolbar-pdf
 		.btn-group#recompile(
 			dropdown,
 			tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"

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

@@ -1,5 +1,9 @@
+.toolbar.toolbar-filetree {
+	.toolbar-small-mixin;
+	.toolbar-alt-mixin;
+}
 
-aside#file-tree {
+#file-tree {
 	.file-tree-inner {
 		position: absolute;
 		top: 32px;

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

@@ -1,3 +1,12 @@
+.toolbar.toolbar-pdf when (@is-overleaf = true) {
+	.toolbar-small-mixin;
+	.toolbar-alt-mixin;
+}
+
+.toolbar.toolbar-pdf when (@is-overleaf = false) {
+	.toolbar-tall-mixin;
+}
+
 .pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
 	.full-size;
 	top: 58px;

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

@@ -106,41 +106,53 @@
 	}
 
 	&.toolbar-small {
-		height: 32px;
-		> a, .toolbar-right > a {
-			padding: 2px 4px 1px 4px;
-			margin: 0;
-			margin-top: 2px;
-		}
-		> a {
-			margin-left: 2px;
-		}
-		.toolbar-right > a {
-			margin-left: 0;
-			margin-right: 2px;
-		}
+		.toolbar-small-mixin;
 	}
 
 	&.toolbar-tall {
-		height: 58px;
-		padding-top: 10px;
-		> a, .toolbar-right > a {
-			padding: 4px 10px 5px;
-		}
-		> a.btn, .toolbar-right > a.btn {
-			margin: 0 (@line-height-computed / 2);
-		}
-		.btn-group {
-			margin: 0 (@line-height-computed / 2);
-			> .btn-group {
-				margin: 0;
-			}
-		}
+		.toolbar-small-mixin;
 	}
 
 	&.toolbar-alt {
-		background-color: @toolbar-alt-bg-color;
+		.toolbar-alt-mixin;
+	}
+}
+
+
+.toolbar-small-mixin() {
+	height: 32px;
+	> a, .toolbar-right > a {
+		padding: 2px 4px 1px 4px;
+		margin: 0;
+		margin-top: 2px;
 	}
+	> a {
+		margin-left: 2px;
+	}
+	.toolbar-right > a {
+		margin-left: 0;
+		margin-right: 2px;
+	}
+}
+
+.toolbar-tall-mixin() {
+	height: 58px;
+	padding-top: 10px;
+	> a, .toolbar-right > a {
+		padding: 4px 10px 5px;
+	}
+	> a.btn, .toolbar-right > a.btn {
+		margin: 0 (@line-height-computed / 2);
+	}
+	.btn-group {
+		margin: 0 (@line-height-computed / 2);
+		> .btn-group {
+			margin: 0;
+		}
+	}
+}
+.toolbar-alt-mixin() {
+	background-color: @toolbar-alt-bg-color;
 }
 
 .toolbar-label {