Make full-width backgrounds, even with indented filetree items.

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

@@ -31,7 +31,11 @@ aside#file-tree {
 		overflow-x: hidden;
 		height: 100%;
 
-		ul {
+		ul when (@is-overleaf = false) {
+			margin-left: (@line-height-computed / 2);
+		}
+
+		ul when (@is-overleaf = true) {
 			margin-left: (@line-height-computed / 2);
 		}
 
@@ -52,6 +56,13 @@ aside#file-tree {
 				&: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 negative (in the x axis) box-shadow is a 
+					// hack to paint the unfilled left-hand region.
+					box-shadow: -200px 0 0 @file-tree-item-hover-bg;
+				}
 				input {
 					line-height: 1.6;
 				}
@@ -61,12 +72,12 @@ aside#file-tree {
 			}
 
 			i.fa {
-				color: @file-tree-item-color;
+				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;
 			}
 
@@ -74,7 +85,7 @@ aside#file-tree {
 				width: 24px;
 				padding: 6px;
 				font-size: 0.7rem;
-				color: @gray
+				color: @file-tree-item-toggle-color;
 			}
 			
 			&.multi-selected {
@@ -129,8 +140,16 @@ aside#file-tree {
 			}
 
 			> .entity when (@is-overleaf = true) {
-				background-color: @file-tree-item-selected-bg;
+				i.fa {
+					color: #FFF;
+				}
 				> .entity-name {
+					background-color: @file-tree-item-selected-bg;
+					// 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 negative (in the x axis) box-shadow is a 
+					// hack to paint the unfilled left-hand region.
+					box-shadow: -200px 0 0 @file-tree-item-selected-bg;
 					font-weight: bold;
 					padding-right: 32px;
 
@@ -147,7 +166,7 @@ aside#file-tree {
 	}
 }
 
-.editor-dark {
+.editor-dark when (@is-overleaf = false) {
 	aside#file-tree {
 		// background-color: lighten(@editor-dark-background-color, 10%);
 		
@@ -175,6 +194,4 @@ aside#file-tree {
 			}
 		}
 	}
-	
-	
 }

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

@@ -22,13 +22,13 @@
 	.toolbar-left > a:not(.btn),
 	.toolbar-right > a:not(.btn) {
 		display: inline-block;
-		color: @gray-light;
+		color: @toolbar-icon-btn-color;
 		padding: 4px 10px 5px;
 		margin: 1px 2px;
 		border-radius: @border-radius-small;
 		&: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 {

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

@@ -899,13 +899,20 @@
 @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);
 
 // 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;
+@file-tree-bg                    : transparent;
+@file-tree-item-color            : @gray-darker;
+@file-tree-item-toggle-color     : @gray;
+@file-tree-item-icon-color       : @gray-light;
+@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

@@ -168,13 +168,20 @@
 @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;
 
 // 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;
+@file-tree-bg                    : @ol-blue-gray-4;
+@file-tree-item-color            : #FFF;
+@file-tree-item-toggle-color     : #FFF;
+@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        : lighten(@brand-warning, 10%);
+@file-tree-multiselect-hover-bg  : lighten(@brand-warning, 20%);
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.