Editor header styling.

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

@@ -250,8 +250,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/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/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

@@ -48,18 +48,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;
@@ -96,7 +96,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;

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,6 +794,8 @@
 @left-menu-animation-duration: 0.35s;
 
 @toolbar-border-color: @gray-lighter;
+@common-border-color: @gray-lighter;
+@editor-border-color: @gray-lighter;
 @file-tree-droppable-background-color: rgb(252, 231, 199);
 
 @editor-dark-background-color: #333;
@@ -876,15 +878,26 @@
 @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    : @link-hover-color;
+@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);
 
 // Tags
 @tag-border-radius  : 0.25em;

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

@@ -156,6 +156,18 @@
 @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;
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.