Merge pull request #167 from sharelatex/pr-ol-beta-editor-styling

V2 editor styling

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

@@ -118,7 +118,11 @@ div.full-size(
 		h3.popover-title #{translate("link_sharing")}
 		.popover-content
 			p #{translate("try_out_link_sharing")}
-			img(src="/img/onboarding/linksharing/link-sharing.png" width="100%")
+			img(
+				src="/img/onboarding/linksharing/link-sharing.png"
+				alt="Link sharing demo"
+				width="100%"
+			)
 			p #{translate("try_link_sharing_description")}
 			button.btn.btn-default.btn-block(ng-click="dismiss()")
 				| #{translate("got_it")}

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/header.pug

@@ -7,9 +7,9 @@ header.toolbar.toolbar-header.toolbar-with-labels(
 			href,
 			ng-click="ui.leftMenuShown = true;",
 		)
-			i.fa.fa-fw.fa-bars
+			i.fa.fa-fw.fa-bars.editor-menu-icon
 			p.toolbar-label #{translate("menu")}
-		a(
+		a.toolbar-header-back-projects(
 			href="/project"
 		)
 			i.fa.fa-fw.fa-level-up

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

@@ -1,6 +1,6 @@
 div.full-size.pdf(ng-controller="PdfController")
-	.toolbar.toolbar-tall
-		.btn-group#recompile(
+	.toolbar.toolbar-pdf
+		.btn-group.btn-recompile-group#recompile(
 			dropdown,
 			tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"
 			tooltip-class="keyboard-tooltip"
@@ -8,7 +8,7 @@ div.full-size.pdf(ng-controller="PdfController")
 			tooltip-append-to-body="true"
 			tooltip-placement="bottom"
 		)
-			a.btn.btn-info(
+			a.btn.btn-recompile(
 				href,
 				ng-disabled="pdf.compiling",
 				ng-click="recompile()"
@@ -19,7 +19,7 @@ div.full-size.pdf(ng-controller="PdfController")
 				| &nbsp;&nbsp;
 				span(ng-show="!pdf.compiling") #{translate("recompile")}
 				span(ng-show="pdf.compiling") #{translate("compiling")}...
-			a.btn.btn-info.dropdown-toggle(
+			a.btn.btn-recompile.dropdown-toggle(
 				href,
 				ng-disabled="pdf.compiling",
 				dropdown-toggle
@@ -102,6 +102,7 @@ div.full-size.pdf(ng-controller="PdfController")
 				tooltip-placement="bottom"
 				tooltip-append-to-body="true"
 			)
+				i.fa.fa-expand
 				i.full-screen
 			a(
 				href,
@@ -111,6 +112,7 @@ div.full-size.pdf(ng-controller="PdfController")
 				tooltip-placement="bottom"
 				tooltip-append-to-body="true"
 			)
+				i.fa.fa-compress
 				i.split-screen
 				i.split-screen
 	// end of toolbar

services/web/public/img/ol-brand/overleaf-o-grey.svg

@@ -1,18 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 136 157" style="enable-background:new 0 0 136 157;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#9B9B9B;}
-</style>
-<g id="Page-1">
-	<g id="overleaf">
-		<g id="Group">
-			<path id="Fill-1" class="st0" d="M37.2,39.7C14.8,54,0,77.3,0,102.3C0,132.5,24.5,157,54.7,157c30.2,0,54.7-24.5,54.7-54.7
-				c0-23.3-14.6-43.3-35.2-51.1c-4-1.5-12.6-4.2-19.4-3.6c-9.8,6.2-21.8,19-27.4,31.8c8.4-10.1,21.5-14.5,33.2-12.6
-				c17.1,2.8,30.2,17.6,30.2,35.6c0,19.9-16.1,36-36,36c-11,0-20.8-4.9-27.4-12.6C17.5,114.3,15,101.9,17,89.8
-				c6.9-42.4,57.2-66.5,94.6-75.8C99.4,20.5,77.4,31.1,62,42.6c44.9,17.3,52.2-20.5,73.2-37.5C114-3.1,37.3-6.1,37.2,39.7z"/>
-		</g>
-	</g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 157"><path d="M37.2 39.7C14.8 54 0 77.3 0 102.3 0 132.5 24.5 157 54.7 157c30.2 0 54.7-24.5 54.7-54.7 0-23.3-14.6-43.3-35.2-51.1-4-1.5-12.6-4.2-19.4-3.6-9.8 6.2-21.8 19-27.4 31.8 8.4-10.1 21.5-14.5 33.2-12.6 17.1 2.8 30.2 17.6 30.2 35.6 0 19.9-16.1 36-36 36-11 0-20.8-4.9-27.4-12.6-9.9-11.5-12.4-23.9-10.4-36 6.9-42.4 57.2-66.5 94.6-75.8C99.4 20.5 77.4 31.1 62 42.6c44.9 17.3 52.2-20.5 73.2-37.5-21.2-8.2-97.9-11.2-98 34.6z" fill="#9b9b9b"/></svg>

services/web/public/img/ol-brand/overleaf-o-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 157"><path d="M37.2 39.7C14.8 54 0 77.3 0 102.3 0 132.5 24.5 157 54.7 157s54.7-24.5 54.7-54.7c0-23.3-14.6-43.3-35.2-51.1-4-1.5-12.6-4.2-19.4-3.6-9.8 6.2-21.8 19-27.4 31.8 8.4-10.1 21.5-14.5 33.2-12.6 17.1 2.8 30.2 17.6 30.2 35.6 0 19.9-16.1 36-36 36-11 0-20.8-4.9-27.4-12.6-9.9-11.5-12.4-23.9-10.4-36 6.9-42.4 57.2-66.5 94.6-75.8C99.4 20.5 77.4 31.1 62 42.6c44.9 17.3 52.2-20.5 73.2-37.5-21.2-8.2-97.9-11.2-98 34.6z" fill="#fff"/></svg>

services/web/public/img/ol-brand/overleaf-o.svg

@@ -1,10 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="136px" height="157px" viewBox="0 0 136 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g id="overleaf" fill="#4F9C45">
-      <g id="Group">
-        <path d="M37.205,39.652 C14.822,53.982 0,77.339 0,102.326 C0,132.522 24.48,157 54.681,157 C84.879,157 109.355,132.522 109.355,102.326 C109.355,78.986 94.729,59.05 74.151,51.215 C70.193,49.71 61.595,47.002 54.73,47.58 C44.924,53.814 32.979,66.624 27.319,79.389 C35.735,69.296 48.856,64.901 60.489,66.77 C77.615,69.547 90.697,84.408 90.697,102.321 C90.697,122.217 74.571,138.342 54.681,138.342 C43.719,138.342 33.896,133.446 27.293,125.723 C17.516,114.299 15,101.91 16.975,89.809 C23.902,47.434 74.208,23.279 111.611,14.01 C99.404,20.468 77.384,31.084 61.985,42.64 C106.909,59.981 114.169,22.123 135.202,5.181 C114.038,-3.07 37.33,-6.117 37.205,39.652 Z" id="Fill-1"></path>
-      </g>
-    </g>
-  </g>
-</svg>
+<svg width="136" height="157" xmlns="http://www.w3.org/2000/svg"><path d="M37.205 39.652C14.822 53.982 0 77.339 0 102.326 0 132.522 24.48 157 54.681 157c30.198 0 54.674-24.478 54.674-54.674 0-23.34-14.626-43.276-35.204-51.111-3.958-1.505-12.556-4.213-19.421-3.635-9.806 6.234-21.751 19.044-27.411 31.809 8.416-10.093 21.537-14.488 33.17-12.619 17.126 2.777 30.208 17.638 30.208 35.551 0 19.896-16.126 36.021-36.016 36.021-10.962 0-20.785-4.896-27.388-12.619C17.516 114.299 15 101.91 16.975 89.809c6.927-42.375 57.233-66.53 94.636-75.799-12.207 6.458-34.227 17.074-49.626 28.63 44.924 17.341 52.184-20.517 73.217-37.459C114.038-3.07 37.33-6.117 37.205 39.652z" fill="#4F9C45" fill-rule="evenodd"/></svg>

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

@@ -2,7 +2,7 @@
     padding: (@line-height-computed / 4) (@line-height-computed / 2);
     background-color: @state-warning-bg;
     color: #333;
-    border-bottom: 1px solid @toolbar-border-color;
+    border-bottom: 1px solid @common-border-color;
 }
 
 .clickable {

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

@@ -26,6 +26,20 @@
 	}
 }
 
+.editor-menu-icon when (@is-overleaf = true) {
+	&.fa {
+		width: 1em;
+		background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
+		
+		&::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;
@@ -250,8 +264,8 @@
 .ui-layout-resizer {
 	width: 6px;
 	background-color: #f4f4f4;
-	border-left: 1px solid @toolbar-border-color;
-	border-right: 1px solid @toolbar-border-color;
+	border-left: 1px solid @editor-border-color;
+	border-right: 1px solid @editor-border-color;
 	.ui-layout-toggler {
 		color: #999;
 		font-family: FontAwesome;

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

@@ -126,12 +126,12 @@
 		height: @new-message-height;
 		background-color: @gray-lightest;
 		padding: @line-height-computed / 4;
-		border-top: 1px solid @toolbar-border-color;
+		border-top: 1px solid @editor-border-color;
 		textarea {
 			overflow: auto;
 			resize: none;
 			border-radius: @border-radius-base;
-			border: 1px solid @toolbar-border-color;
+			border: 1px solid @editor-border-color;
 			height: 100%;
 			width: 100%;
 			color: @gray-dark;

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

@@ -1,5 +1,20 @@
+.fake-full-width-bg(@bg-color) {
+	&::before {
+		content: '\00a0';
+		position: absolute;
+		width: 100%;
+		right: 100%;
+		background-color: @bg-color;
+	}
+}
 
-aside#file-tree {
+#file-tree {
+	.toolbar.toolbar-filetree {
+		.toolbar-small-mixin;
+		.toolbar-alt-mixin;
+		padding: 0 5px;
+	}
+	
 	.file-tree-inner {
 		position: absolute;
 		top: 32px;
@@ -7,12 +22,14 @@ aside#file-tree {
 		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;
@@ -20,10 +37,13 @@ aside#file-tree {
 		margin: (@line-height-computed / 2);
 	}
 
-	ul.file-tree-list {
+	ul.file-tree-list when (@is-overleaf = false) {
 		font-size: 0.8rem;
-		margin: 0;
 		padding: (@line-height-computed / 4) 0;
+	}
+
+	ul.file-tree-list {
+		margin: 0;
 		overflow-x: hidden;
 		height: 100%;
 
@@ -32,7 +52,7 @@ aside#file-tree {
 		}
 
 		li {
-			line-height: 2.6;
+			line-height: @file-tree-line-height;
 			position: relative;
 
 			.entity {
@@ -40,29 +60,42 @@ aside#file-tree {
 			}
 
 			.entity-name {
-				color: @gray-darker;
+				color: @file-tree-item-color;
 				cursor: pointer;
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				&:hover {
-					background-color: @gray-lightest;
+					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 {
-					background-color: fade(@file-tree-droppable-background-color, 60%);
+				&.droppable-hover when (@is-overleaf = false) {
+					background-color: fade(@file-tree-droppable-bg-color, 60%);
 				}
+
+				&.droppable-hover when (@is-overleaf = true) {
+					background-color: @file-tree-droppable-bg-color;
+					.fake-full-width-bg(@file-tree-droppable-bg-color);
+				}
+
 			}
 
 			i.fa {
-				color: @gray-light;
+				color: @file-tree-item-icon-color;
 				font-size: 14px;
 			}
 
 			i.fa-folder-open, i.fa-folder {
-				color: lighten(desaturate(@link-color, 10%), 5%);
+				color: @file-tree-item-folder-color;
 				font-size: 14px;
 			}
 
@@ -70,14 +103,31 @@ aside#file-tree {
 				width: 24px;
 				padding: 6px;
 				font-size: 0.7rem;
-				color: @gray
+				color: @file-tree-item-toggle-color;
 			}
 			
 			&.multi-selected {
-				> .entity > .entity-name {
-					background-color: lighten(@brand-info, 40%);
+				> .entity > .entity-name when (@is-overleaf = false) {
+					background-color: @file-tree-multiselect-bg;
 					&:hover {
-						background-color: lighten(@brand-info, 30%);
+						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;
+						}
+						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);
+						}
 					}
 				}
 			}
@@ -96,6 +146,7 @@ aside#file-tree {
 				top: 1px;
 				left: 44px;
 				right: 32px;
+				color: @file-tree-item-input-color;
 				input {
 					width: 100%;
 				}
@@ -111,7 +162,7 @@ aside#file-tree {
 	
 	&:not(.multi-selected) {
 		ul.file-tree-list li.selected {
-			> .entity > .entity-name {
+			> .entity > .entity-name when (@is-overleaf = false) {
 				color: @link-color;
 				border-right: 4px solid @link-color;
 				font-weight: bold;
@@ -123,15 +174,38 @@ aside#file-tree {
 					display: inline;
 				}
 			}
+
+			> .entity when (@is-overleaf = true) {
+				> .entity-name {
+					> div > i.fa,
+					> i.fa,
+					.entity-menu-toggle i.fa {
+						color: #FFF;
+					}
+					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 {
-		background-color: fade(@file-tree-droppable-background-color, 60%);
+	ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
+		background-color: fade(@file-tree-droppable-bg-color, 60%);
+	}
+	ul.droppable-hover.file-tree-list when (@is-overleaf = true) {
+		background-color: @file-tree-droppable-bg-color;
+		.fake-full-width-bg(@file-tree-droppable-bg-color);
 	}
 }
 
-.editor-dark {
+// 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%);
 		
@@ -159,6 +233,4 @@ aside#file-tree {
 			}
 		}
 	}
-	
-	
 }

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

@@ -70,7 +70,7 @@
 	}
 
 	aside.change-list {
-		border-left: 1px solid @toolbar-border-color;
+		border-left: 1px solid @editor-border-color;
 		height: 100%;
 		width: @changesListWidth;
 		position: absolute;
@@ -91,7 +91,7 @@
 
 				.day {
 					background-color: #fafafa;
-					border-bottom: 1px solid @toolbar-border-color;
+					border-bottom: 1px solid @editor-border-color;
 					padding: 4px;
 					font-weight: bold;
 					text-align: center;
@@ -132,7 +132,7 @@
 					padding: (@line-height-computed / 4);
 					padding-left: 38px;
 					min-height: 38px;
-					border-bottom: 1px solid @toolbar-border-color;
+					border-bottom: 1px solid @editor-border-color;
 					cursor: pointer;
 					&:hover {
 						background-color: @gray-lightest;

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

@@ -1,3 +1,15 @@
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
+	.toolbar-small-mixin;
+	.toolbar-alt-mixin;
+	border-bottom: 0;
+	padding-right: 5px;
+}
+
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
+	.toolbar-tall-mixin;
+	padding: 0 (@line-height-computed / 2);
+}
+
 .pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
 	.full-size;
 	top: 58px;
@@ -13,6 +25,42 @@
 	}
 }
 
+.btn-recompile-group when (@is-overleaf = true) {
+	align-self: stretch;
+	margin-right: 5px;
+}
+
+.btn-recompile-group when (@is-overleaf = false) {
+	margin-right: (@line-height-computed / 2);
+}
+
+
+.btn-recompile when (@is-overleaf = true) {
+	height: 100%;
+	.btn-primary;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	&:first-child {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+.btn-recompile when (@is-overleaf = false) {
+	.btn-info;
+}
+
+.btn-split-screen when (@is-overleaf = false) {
+	.fa {
+		display: none;
+	}
+}
+.btn-split-screen when (@is-overleaf = true) {
+	.fa {
+		display: none;
+	}
+}
+
 .pdf-viewer {
 	iframe {
 		width: 100%;
@@ -82,31 +130,43 @@
 
 .pdf .toolbar {
 	.toolbar-right {
-		margin-right: @line-height-computed / 2;
 		a {
 			&:hover {
-				i {
+				i when (@is-overleaf = false) {
 					box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
 					border-color: @gray-dark;
 				}
 			}
-			i {
+			i when (@is-overleaf = false) {
 				display: inline-block;
 				width: 16px;
 				height: 16px;
 				border: 1px solid @gray-light;
 				margin-top: 5px;
 			}
+
 			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;
+			}
 		}
 	}
 }

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

@@ -902,6 +902,13 @@
 	}
 }
 
+.review-icon when (@is-overleaf) {
+	background-position-y: -60px;
+	.toolbar .btn-full-height:hover & {
+		background-position-y: -60px;
+	}
+}
+
 .resolved-comments-toggle {
 	font-size: 14px;
 	color: lighten(@rp-type-blue, 25%);

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

@@ -1,6 +1,6 @@
 .ace_search {
 	background-color: @gray-lightest;
-	border: 1px solid @toolbar-border-color;
+	border: 1px solid @editor-border-color;
 	border-top: 0 none;
 	width: 350px;
 	overflow: hidden;

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

@@ -1,6 +1,8 @@
 .toolbar {
+	display: flex;
+	align-items: center;
 	height: 40px;
-	border-bottom: 1px solid @toolbar-border-color;
+	border-bottom: @toolbar-border-bottom;
 
 	> a, .toolbar-right > a {
 		position: relative;
@@ -22,13 +24,16 @@
 	.toolbar-left > a:not(.btn),
 	.toolbar-right > a:not(.btn) {
 		display: inline-block;
-		color: @gray-light;
-		padding: 4px 10px 5px;
-		margin: 1px 2px;
+		color: @toolbar-icon-btn-color;
+		padding: 0 5px;
 		border-radius: @border-radius-small;
+		&.toolbar-header-back-projects {
+			padding: 5px 10px 4px;
+			margin-bottom: 1px;
+		}
 		&:hover {
-			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-			color: @gray-dark;
+			text-shadow: @toolbar-icon-btn-hover-shadow;
+			color: @toolbar-icon-btn-hover-color;
 			text-decoration: none;
 		}
 		&.active, &:active {
@@ -37,7 +42,7 @@
 			}
 			color: white;
 			background-color: @link-color;
-			.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
+			box-shadow: @toolbar-icon-btn-hover-boxshadow;
 			&:hover {
 				color: white;
 			}
@@ -48,18 +53,18 @@
 		border: none;
 		border-radius: 0;
 		border-right: 1px solid @toolbar-border-color;
-		color: @link-color;
+		color: @toolbar-btn-color;
 		padding: 3px 10px 5px;
 		font-size: 20px;
 		&:hover {
-			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
-			background-color: darken(white, 10%);
-			color: @link-hover-color;
+			text-shadow: @toolbar-btn-hover-text-shadow;
+			background-color: @toolbar-btn-hover-bg-color;
+			color: @toolbar-btn-hover-color;
 		}
 		&.active, &:active {
-			color: white;
-			background-color: @link-color;
-			.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
+			color: @toolbar-btn-active-color;
+			background-color: @toolbar-btn-active-bg-color;
+			box-shadow: @toolbar-btn-active-shadow;
 		}
 		.label {
 			top: 4px;
@@ -72,12 +77,17 @@
 	}
 
 	.toolbar-left {
+		display: flex;
 		float: left;
 		text-align: center;
+		align-items: center;
 	}
 
 	.toolbar-right {
-		float: right;
+		display: flex;
+		align-items: center;
+		flex-grow: 1;
+		justify-content: flex-end;
 		.btn-full-height {
 			border-right: 0;
 			border-left: 1px solid @toolbar-border-color;
@@ -96,7 +106,8 @@
 	}
 
 	&.toolbar-header {
-		box-shadow: 0 0 2px #ccc;
+		background-color: @toolbar-header-bg-color;
+		box-shadow: @toolbar-header-shadow;
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -105,43 +116,30 @@
 	}
 
 	&.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: #fafafa;
+		.toolbar-alt-mixin;
 	}
 }
 
+.toolbar-small-mixin() {
+	height: 32px;
+}
+
+.toolbar-tall-mixin() {
+	height: 58px;
+	padding-top: 10px;
+}
+.toolbar-alt-mixin() {
+	background-color: @toolbar-alt-bg-color;
+}
+
 .toolbar-label {
 	display: none;
 	margin: 0 4px;

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

@@ -3,7 +3,7 @@
     padding: (@line-height-computed / 4) (@line-height-computed / 2);
     background-color: @state-warning-bg;
     color: #333;
-    border-bottom: 1px solid @toolbar-border-color;
+    border-bottom: 1px solid @common-border-color;
 	text-align:center;
     
     img {

services/web/public/stylesheets/core/_common-variables.less

@@ -794,7 +794,9 @@
 @left-menu-animation-duration: 0.35s;
 
 @toolbar-border-color: @gray-lighter;
-@file-tree-droppable-background-color: rgb(252, 231, 199);
+@common-border-color: @gray-lighter;
+@editor-border-color: @gray-lighter;
+@file-tree-droppable-bg-color: rgb(252, 231, 199);
 
 @editor-dark-background-color: #333;
 @editor-dark-toolbar-border-color: #222;
@@ -876,16 +878,45 @@
 @folders-untagged-line-height  : 1.7;
 
 // Progress bars
-@progress-border-radius : @border-radius-base;
-@progress-border-width  : 1px;
-@progress-bar-shadow    : inset 0 -1px 0 rgba(0,0,0,.15);
+@progress-border-radius        : @border-radius-base;
+@progress-border-width         : 1px;
+@progress-bar-shadow           : inset 0 -1px 0 rgba(0,0,0,.15);
 
 // Footer
-@footer-link-color       : @link-color;
-@footer-link-hover-color : @link-hover-color;
-@footer-bg-color         : transparent;
-@footer-padding          : 2em;
-
+@footer-link-color             : @link-color;
+@footer-link-hover-color       : @link-hover-color;
+@footer-bg-color               : transparent;
+@footer-padding                : 2em;
+
+// Editor header
+@toolbar-header-bg-color          : transparent;
+@toolbar-header-shadow            : 0 0 2px #ccc;
+@toolbar-btn-color                : @link-color;
+@toolbar-btn-hover-color          : @link-hover-color;
+@toolbar-btn-hover-bg-color       : darken(white, 10%);
+@toolbar-btn-hover-text-shadow    : 0 1px 0 rgba(0, 0, 0, 0.15);
+@toolbar-btn-active-color         : white;
+@toolbar-btn-active-bg-color      : @link-color;
+@toolbar-btn-active-shadow        : inset 0 3px 5px rgba(0, 0, 0, 0.225);
+@toolbar-alt-bg-color             : #fafafa;
+@toolbar-icon-btn-color           : @gray-light;
+@toolbar-icon-btn-hover-color     : @gray-dark;
+@toolbar-icon-btn-hover-shadow    : 0 1px 0 rgba(0, 0, 0, 0.25);
+@toolbar-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
+@toolbar-border-bottom            : 1px solid @toolbar-border-color;
+
+// Editor file-tree
+@file-tree-bg                    : transparent;
+@file-tree-line-height           : 2.6;
+@file-tree-item-color            : @gray-darker;
+@file-tree-item-toggle-color     : @gray;
+@file-tree-item-icon-color       : @gray-light;
+@file-tree-item-input-color      : inherit;
+@file-tree-item-folder-color     : lighten(desaturate(@link-color, 10%), 5%);
+@file-tree-item-hover-bg         : @gray-lightest;
+@file-tree-item-selected-bg      : transparent;
+@file-tree-multiselect-bg        : lighten(@brand-info, 40%);
+@file-tree-multiselect-hover-bg  : lighten(@brand-info, 30%);
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;

services/web/public/stylesheets/core/ol-variables.less

@@ -8,7 +8,7 @@
 @ol-blue-gray-1 : #E4E8EE;
 @ol-blue-gray-2 : #9DA7B7;
 @ol-blue-gray-3 : #5D6879;
-@ol-blue-gray-4 : #485973;
+@ol-blue-gray-4 : #455265;
 @ol-blue-gray-5 : #2C3645;
 @ol-blue-gray-6 : #1E2530;
 
@@ -156,6 +156,36 @@
 @footer-link-hover-color        : @ol-dark-green;
 @footer-padding                 : 2em 0;
 
+// Editor header
+@toolbar-header-bg-color          : @ol-blue-gray-6;
+@toolbar-header-shadow            : none;
+@toolbar-btn-color                : #FFF;
+@toolbar-btn-hover-color          : #FFF;
+@toolbar-btn-hover-bg-color       : @ol-blue-gray-5;
+@toolbar-btn-hover-text-shadow    : none;
+@toolbar-btn-active-color         : #FFF;
+@toolbar-btn-active-bg-color      : @ol-green;
+@toolbar-btn-active-shadow        : none;
+@toolbar-border-color             : @ol-blue-gray-5;
+@toolbar-alt-bg-color             : @ol-blue-gray-5;
+@toolbar-icon-btn-color           : #FFF;
+@toolbar-icon-btn-hover-color     : #FFF;
+@toolbar-icon-btn-hover-shadow    : none;
+@toolbar-icon-btn-hover-boxshadow : none;
+@toolbar-border-bottom            : 1px solid @toolbar-border-color;
+// Editor file-tree
+@file-tree-bg                   : @ol-blue-gray-4;
+@file-tree-line-height          : 2.05;
+@file-tree-item-color           : #FFF;
+@file-tree-item-input-color     : @ol-blue-gray-5;
+@file-tree-item-toggle-color    : @ol-blue-gray-2;
+@file-tree-item-icon-color      : @ol-blue-gray-2;
+@file-tree-item-folder-color    : @ol-blue-gray-2;
+@file-tree-item-hover-bg        : @ol-blue-gray-5;
+@file-tree-item-selected-bg     : @ol-green;
+@file-tree-multiselect-bg       : @ol-blue;
+@file-tree-multiselect-hover-bg : @ol-dark-blue;
+@file-tree-droppable-bg-color   : tint(@ol-green, 5%);
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.