Basic filetree skinning, still WIP.

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

@@ -7,6 +7,7 @@ aside#file-tree {
 		left: 0;
 		right: 0;
 		overflow-y: auto;
+		background-color: @file-tree-bg;
 
 		&.no-toolbar {
 			top: 0;
@@ -20,10 +21,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%;
 
@@ -40,13 +44,13 @@ 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;
 				}
 				input {
 					line-height: 1.6;
@@ -57,7 +61,7 @@ aside#file-tree {
 			}
 
 			i.fa {
-				color: @gray-light;
+				color: @file-tree-item-color;
 				font-size: 14px;
 			}
 
@@ -111,7 +115,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,6 +127,18 @@ aside#file-tree {
 					display: inline;
 				}
 			}
+
+			> .entity when (@is-overleaf = true) {
+				background-color: @file-tree-item-selected-bg;
+				> .entity-name {
+					font-weight: bold;
+					padding-right: 32px;
+
+					.entity-menu-toggle {
+						display: inline;
+					}
+				}
+			}
 		}
 	}
 

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

@@ -139,7 +139,7 @@
 	}
 
 	&.toolbar-alt {
-		background-color: #fafafa;
+		background-color: @toolbar-alt-bg-color;
 	}
 }
 

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

@@ -898,7 +898,14 @@
 @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;
+
+// Editor file-tree
+@file-tree-bg                  : transparent;
+@file-tree-item-color          : @gray-darker;
+@file-tree-item-icon-color     : @gray-light;
+@file-tree-item-hover-bg       : @gray-lightest;
+@file-tree-item-selected-bg    : transparent;
 // 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;
 
@@ -167,7 +167,14 @@
 @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;
+
+// Editor file-tree
+@file-tree-bg                   : @ol-blue-gray-4;
+@file-tree-item-color           : white;
+@file-tree-item-icon-color      : @file-tree-item-color
+@file-tree-item-hover-bg        : @ol-blue-gray-5;
+@file-tree-item-selected-bg     : @ol-green;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.