Basic styles for editor toolbar

services/web/app/views/project/editor/editor.pug

@@ -39,7 +39,7 @@ div.full-size(
 			ace-editor="editor",
 			ng-if="!editor.richText",
 			ng-show="!!editor.sharejs_doc && !editor.opening",
-			style=showRichText ? "top: 40px" : "",
+			style=showRichText ? "top: 32px" : "",
 			theme="settings.theme",
 			keybindings="settings.mode",
 			font-size="settings.fontSize",

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

@@ -81,7 +81,12 @@
 }
 
 #editor-rich-text {
-	top: 40px; // TODO: replace with toolbar height var
+	top: @editor-toolbar-height;
+}
+
+.toolbar-editor {
+	height: @editor-toolbar-height;
+	background-color: @editor-toolbar-bg;
 }
 
 .loading-screen {

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

@@ -932,6 +932,10 @@
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
 
+// Editor toolbar
+@editor-toolbar-height            : 32px;
+@editor-toolbar-bg                : #fff;
+
 // Chat
 @chat-bg                          : transparent;
 @chat-message-color               : @text-color;

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

@@ -235,6 +235,9 @@
 @synctex-controls-padding         : 0;
 @editor-border-color              : @ol-blue-gray-5;
 
+// Editor toolbar
+@editor-toolbar-bg                : @ol-blue-gray-5;
+
 // Chat
 @chat-bg                          : @ol-blue-gray-5;
 @chat-message-color               : #FFF;