From ead190bf23f7fad58659e9d7495683e24099e7e5 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 22 Nov 2017 11:54:57 +0000
Subject: [PATCH] Style drag and drop, also renaming and inputs.

---
 .../stylesheets/app/editor/file-tree.less     | 21 +++++++++++++------
 .../stylesheets/core/_common-variables.less   |  3 ++-
 .../public/stylesheets/core/ol-variables.less | 20 ++++++++++--------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less
index a8fdf35ce2..51c0197e59 100644
--- a/services/web/public/stylesheets/app/editor/file-tree.less
+++ b/services/web/public/stylesheets/app/editor/file-tree.less
@@ -67,10 +67,15 @@ aside#file-tree {
 				input {
 					line-height: 1.6;
 				}
-				&.droppable-hover {
-					// TODO pick right color for the OL Beta theme.
-					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;
+					box-shadow: -200px 0 0 @file-tree-droppable-bg-color;
+				}
+
 			}
 
 			i.fa {
@@ -130,6 +135,7 @@ aside#file-tree {
 				top: 1px;
 				left: 44px;
 				right: 32px;
+				color: @file-tree-item-input-color;
 				input {
 					width: 100%;
 				}
@@ -182,9 +188,12 @@ aside#file-tree {
 		}
 	}
 
-	// TODO pick right color for the OL Beta theme.
-	ul.droppable-hover {
-		background-color: fade(@file-tree-droppable-background-color, 60%);
+	ul.droppable-hover when (@is-overleaf = false) {
+		background-color: fade(@file-tree-droppable-bg-color, 60%);
+	}
+	ul.droppable-hover when (@is-overleaf = true) {
+		background-color: @file-tree-droppable-bg-color;
+		box-shadow: -200px 0 0 @file-tree-droppable-bg-color;
 	}
 }
 
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 20bf83a34b..6e22383496 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -796,7 +796,7 @@
 @toolbar-border-color: @gray-lighter;
 @common-border-color: @gray-lighter;
 @editor-border-color: @gray-lighter;
-@file-tree-droppable-background-color: rgb(252, 231, 199);
+@file-tree-droppable-bg-color: rgb(252, 231, 199);
 
 @editor-dark-background-color: #333;
 @editor-dark-toolbar-border-color: #222;
@@ -908,6 +908,7 @@
 @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;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index fd4a41fe97..325fbd28d5 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -173,15 +173,17 @@
 @toolbar-icon-btn-hover-shadow  : none;
 
 // Editor file-tree
-@file-tree-bg                    : @ol-blue-gray-4;
-@file-tree-item-color            : #FFF;
-@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-bg                   : @ol-blue-gray-4;
+@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.