From ce3e410250136ee0d75885a9c7be95092c76a3f8 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 17:00:25 +0000
Subject: [PATCH] Configure resizer colors.

---
 .../web/public/stylesheets/app/editor.less    | 25 ++++++++-
 .../stylesheets/core/_common-variables.less   | 52 ++++++++++---------
 .../public/stylesheets/core/ol-variables.less |  2 +
 3 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index e37d829710..3f735e4e5f 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -261,9 +261,9 @@
 	}
 }
 
-.ui-layout-resizer {
+.ui-layout-resizer when (@is-overleaf = false) {
 	width: 6px;
-	background-color: #f4f4f4;
+	background-color: @editor-resizer-bg-color;
 	border-left: 1px solid @editor-border-color;
 	border-right: 1px solid @editor-border-color;
 	.ui-layout-toggler {
@@ -282,6 +282,27 @@
 		}
 	}
 }
+
+.ui-layout-resizer when (@is-overleaf = true) {
+	background-color: @editor-resizer-bg-color;
+
+	// .ui-layout-toggler {
+	// 	color: #999;
+	// 	font-family: FontAwesome;
+	// 	font-style: normal;
+	// 	font-weight: normal;
+	// 	line-height: 1;
+	// 	-webkit-font-smoothing: antialiased;
+	// 	-moz-osx-font-smoothing: grayscale;
+	// 	font-size: 16px !important;
+	// 	line-height: 50px;
+	// 	&:hover {
+	// 		background-color: #ddd;
+	// 		color: #333;
+	// 	}
+	// }
+}
+
 .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
 	.ui-layout-toggler {
 		&:before {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 47030d08ff..11d3e3681c 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -889,32 +889,36 @@
 @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-border-bottom         : 1px solid @toolbar-border-color;
+@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-border-bottom          : 1px solid @toolbar-border-color;
 
 // Editor file-tree
-@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-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%);
+@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-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%);
+
+// Editor resizers
+@editor-resizer-bg-color        : #F4F4F4;
+
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 4911a9d2c4..4cf789c666 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -184,6 +184,8 @@
 @file-tree-multiselect-bg       : @ol-blue;
 @file-tree-multiselect-hover-bg : @ol-dark-blue;
 @file-tree-droppable-bg-color   : tint(@ol-green, 5%);
+// Editor resizers
+@editor-resizer-bg-color        : @ol-blue-gray-6;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.