diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug
index f936750a13..5b4934ede2 100644
--- a/services/web/app/views/project/editor/file-tree.pug
+++ b/services/web/app/views/project/editor/file-tree.pug
@@ -1,5 +1,5 @@
aside#file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }").full-size
- .toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write")
+ .toolbar.toolbar-filetree(ng-if="permissions.write")
a(
href,
ng-click="openNewDocModal()",
diff --git a/services/web/app/views/project/editor/header.pug b/services/web/app/views/project/editor/header.pug
index 49361b5a2e..74a4639925 100644
--- a/services/web/app/views/project/editor/header.pug
+++ b/services/web/app/views/project/editor/header.pug
@@ -7,7 +7,7 @@ header.toolbar.toolbar-header.toolbar-with-labels(
href,
ng-click="ui.leftMenuShown = true;",
)
- i.fa.fa-fw.fa-bars
+ i.fa.fa-fw.fa-bars.editor-menu-icon
p.toolbar-label #{translate("menu")}
a(
href="/project"
diff --git a/services/web/app/views/project/editor/pdf.pug b/services/web/app/views/project/editor/pdf.pug
index eb2b4bfefd..a3b3a2e2f9 100644
--- a/services/web/app/views/project/editor/pdf.pug
+++ b/services/web/app/views/project/editor/pdf.pug
@@ -1,6 +1,6 @@
div.full-size.pdf(ng-controller="PdfController")
- .toolbar.toolbar-tall
- .btn-group#recompile(
+ .toolbar.toolbar-pdf
+ .btn-group.btn-recompile-group#recompile(
dropdown,
tooltip-html="'"+translate('recompile_pdf')+" ({{modifierKey}} + Enter)'"
tooltip-class="keyboard-tooltip"
@@ -8,7 +8,7 @@ div.full-size.pdf(ng-controller="PdfController")
tooltip-append-to-body="true"
tooltip-placement="bottom"
)
- a.btn.btn-info(
+ a.btn.btn-recompile(
href,
ng-disabled="pdf.compiling",
ng-click="recompile()"
@@ -19,7 +19,7 @@ div.full-size.pdf(ng-controller="PdfController")
|
span(ng-show="!pdf.compiling") #{translate("recompile")}
span(ng-show="pdf.compiling") #{translate("compiling")}...
- a.btn.btn-info.dropdown-toggle(
+ a.btn.btn-recompile.dropdown-toggle(
href,
ng-disabled="pdf.compiling",
dropdown-toggle
@@ -102,6 +102,7 @@ div.full-size.pdf(ng-controller="PdfController")
tooltip-placement="bottom"
tooltip-append-to-body="true"
)
+ i.fa.fa-expand
i.full-screen
a(
href,
@@ -111,6 +112,7 @@ div.full-size.pdf(ng-controller="PdfController")
tooltip-placement="bottom"
tooltip-append-to-body="true"
)
+ i.fa.fa-compress
i.split-screen
i.split-screen
// end of toolbar
diff --git a/services/web/public/img/ol-brand/overleaf-o-white.svg b/services/web/public/img/ol-brand/overleaf-o-white.svg
new file mode 100644
index 0000000000..be896abcc3
--- /dev/null
+++ b/services/web/public/img/ol-brand/overleaf-o-white.svg
@@ -0,0 +1,18 @@
+
+
+
diff --git a/services/web/public/stylesheets/app/base.less b/services/web/public/stylesheets/app/base.less
index a78e1a7cfa..7f2d9a55ed 100644
--- a/services/web/public/stylesheets/app/base.less
+++ b/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 {
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 75b7121094..e37d829710 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -26,6 +26,20 @@
}
}
+.editor-menu-icon when (@is-overleaf = true) {
+ &.fa {
+ width: 1em;
+ background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
+
+ &::before {
+ // Disable the font-awesome icon when in Overleaf by replacing it with a
+ // non-breakable space instead (otherwise the browser would render a
+ // zero-width element).
+ content: "\00a0";
+ }
+ }
+}
+
.full-size {
position: absolute;
top: 0;
@@ -250,8 +264,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;
diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index d0ad76fe9c..c782384cb7 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/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;
diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less
index 7847822bf9..1ccbc6859c 100644
--- a/services/web/public/stylesheets/app/editor/file-tree.less
+++ b/services/web/public/stylesheets/app/editor/file-tree.less
@@ -1,5 +1,20 @@
+.fake-full-width-bg(@bg-color) {
+ &::before {
+ content: '\00a0';
+ position: absolute;
+ width: 100%;
+ right: 100%;
+ background-color: @bg-color;
+ }
+}
-aside#file-tree {
+#file-tree {
+ .toolbar.toolbar-filetree {
+ .toolbar-small-mixin;
+ .toolbar-alt-mixin;
+ padding: 0 5px;
+ }
+
.file-tree-inner {
position: absolute;
top: 32px;
@@ -7,12 +22,14 @@ aside#file-tree {
left: 0;
right: 0;
overflow-y: auto;
+ background-color: @file-tree-bg;
&.no-toolbar {
top: 0;
}
}
+ // TODO; Consolidate with "Project files" in Overleaf
h3 {
font-size: 1rem;
border-bottom: 1px solid @gray;
@@ -20,10 +37,13 @@ aside#file-tree {
margin: (@line-height-computed / 2);
}
- ul.file-tree-list {
+ ul.file-tree-list when (@is-overleaf = false) {
font-size: 0.8rem;
- margin: 0;
padding: (@line-height-computed / 4) 0;
+ }
+
+ ul.file-tree-list {
+ margin: 0;
overflow-x: hidden;
height: 100%;
@@ -40,29 +60,42 @@ aside#file-tree {
}
.entity-name {
- color: @gray-darker;
+ color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
- background-color: @gray-lightest;
+ 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 ::before pseudo-selector is used to fill
+ // the empty space.
+ .fake-full-width-bg(@file-tree-item-hover-bg);
}
input {
line-height: 1.6;
}
- &.droppable-hover {
- 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;
+ .fake-full-width-bg(@file-tree-droppable-bg-color);
+ }
+
}
i.fa {
- color: @gray-light;
+ 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;
}
@@ -70,14 +103,31 @@ aside#file-tree {
width: 24px;
padding: 6px;
font-size: 0.7rem;
- color: @gray
+ color: @file-tree-item-toggle-color;
}
&.multi-selected {
- > .entity > .entity-name {
- background-color: lighten(@brand-info, 40%);
+ > .entity > .entity-name when (@is-overleaf = false) {
+ background-color: @file-tree-multiselect-bg;
&:hover {
- background-color: lighten(@brand-info, 30%);
+ background-color: @file-tree-multiselect-hover-bg;
+ }
+ }
+ > .entity when (@is-overleaf = true) {
+ > .entity-name {
+ > div > i.fa,
+ > i.fa,
+ .entity-menu-toggle i.fa {
+ color: #FFF;
+ }
+ color: #FFF;
+ font-weight: bold;
+ background-color: @file-tree-multiselect-bg;
+ .fake-full-width-bg(@file-tree-multiselect-bg);
+ &:hover {
+ background-color: @file-tree-multiselect-hover-bg;
+ .fake-full-width-bg(@file-tree-multiselect-hover-bg);
+ }
}
}
}
@@ -96,6 +146,7 @@ aside#file-tree {
top: 1px;
left: 44px;
right: 32px;
+ color: @file-tree-item-input-color;
input {
width: 100%;
}
@@ -111,7 +162,7 @@ aside#file-tree {
&:not(.multi-selected) {
ul.file-tree-list li.selected {
- > .entity > .entity-name {
+ > .entity > .entity-name when (@is-overleaf = false) {
color: @link-color;
border-right: 4px solid @link-color;
font-weight: bold;
@@ -123,15 +174,38 @@ aside#file-tree {
display: inline;
}
}
+
+ > .entity when (@is-overleaf = true) {
+ > .entity-name {
+ > div > i.fa,
+ > i.fa,
+ .entity-menu-toggle i.fa {
+ color: #FFF;
+ }
+ background-color: @file-tree-item-selected-bg;
+ font-weight: bold;
+ padding-right: 32px;
+ .fake-full-width-bg(@file-tree-item-selected-bg);
+
+ .entity-menu-toggle {
+ display: inline;
+ }
+ }
+ }
}
}
- ul.droppable-hover {
- background-color: fade(@file-tree-droppable-background-color, 60%);
+ ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
+ background-color: fade(@file-tree-droppable-bg-color, 60%);
+ }
+ ul.droppable-hover.file-tree-list when (@is-overleaf = true) {
+ background-color: @file-tree-droppable-bg-color;
+ .fake-full-width-bg(@file-tree-droppable-bg-color);
}
}
-.editor-dark {
+// TODO check if the OL Beta theme is OK with darker themes.
+.editor-dark when (@is-overleaf = false) {
aside#file-tree {
// background-color: lighten(@editor-dark-background-color, 10%);
@@ -159,6 +233,4 @@ aside#file-tree {
}
}
}
-
-
}
diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less
index 81af8f989f..b6dca4b7cc 100644
--- a/services/web/public/stylesheets/app/editor/history.less
+++ b/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;
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index 0c98050242..a873cd5e8f 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -1,3 +1,15 @@
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
+ .toolbar-small-mixin;
+ .toolbar-alt-mixin;
+ border-bottom: 0;
+ padding-right: 5px;
+}
+
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
+ .toolbar-tall-mixin;
+ padding: 0 (@line-height-computed / 2);
+}
+
.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
.full-size;
top: 58px;
@@ -13,6 +25,42 @@
}
}
+.btn-recompile-group when (@is-overleaf = true) {
+ align-self: stretch;
+ margin-right: 5px;
+}
+
+.btn-recompile-group when (@is-overleaf = false) {
+ margin-right: (@line-height-computed / 2);
+}
+
+
+.btn-recompile when (@is-overleaf = true) {
+ height: 100%;
+ .btn-primary;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ &:first-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+}
+
+.btn-recompile when (@is-overleaf = false) {
+ .btn-info;
+}
+
+.btn-split-screen when (@is-overleaf = false) {
+ .fa {
+ display: none;
+ }
+}
+.btn-split-screen when (@is-overleaf = true) {
+ .fa {
+ display: none;
+ }
+}
+
.pdf-viewer {
iframe {
width: 100%;
@@ -82,31 +130,43 @@
.pdf .toolbar {
.toolbar-right {
- margin-right: @line-height-computed / 2;
a {
&:hover {
- i {
+ i when (@is-overleaf = false) {
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
border-color: @gray-dark;
}
}
- i {
+ i when (@is-overleaf = false) {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid @gray-light;
margin-top: 5px;
}
+
i.full-screen {
border-top-width: 3px;
border-radius: 2px;
}
+
+ i.full-screen when (@is-overleaf = true) {
+ display: none;
+ }
i.split-screen {
width: 7px;
border-top-width: 3px;
border-radius: 2px;
margin-left: 2px;
}
+
+ i.split-screen when (@is-overleaf = true) {
+ display: none;
+ }
+
+ i.fa when (@is-overleaf = false) {
+ display: none;
+ }
}
}
}
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index 15ed39f6a7..5e846be008 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -902,6 +902,13 @@
}
}
+.review-icon when (@is-overleaf) {
+ background-position-y: -60px;
+ .toolbar .btn-full-height:hover & {
+ background-position-y: -60px;
+ }
+}
+
.resolved-comments-toggle {
font-size: 14px;
color: lighten(@rp-type-blue, 25%);
diff --git a/services/web/public/stylesheets/app/editor/search.less b/services/web/public/stylesheets/app/editor/search.less
index 93e7e507d6..f31c59dd6f 100644
--- a/services/web/public/stylesheets/app/editor/search.less
+++ b/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;
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 1bb5f62bdc..ca9464b30a 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -1,6 +1,8 @@
.toolbar {
+ display: flex;
+ align-items: center;
height: 40px;
- border-bottom: 1px solid @toolbar-border-color;
+ border-bottom: @toolbar-border-bottom;
> a, .toolbar-right > a {
position: relative;
@@ -22,13 +24,12 @@
.toolbar-left > a:not(.btn),
.toolbar-right > a:not(.btn) {
display: inline-block;
- color: @gray-light;
- padding: 4px 10px 5px;
- margin: 1px 2px;
+ color: @toolbar-icon-btn-color;
+ padding: 0 5px;
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 {
@@ -48,18 +49,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;
@@ -72,12 +73,17 @@
}
.toolbar-left {
+ display: flex;
float: left;
text-align: center;
+ align-items: center;
}
.toolbar-right {
- float: right;
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ justify-content: flex-end;
.btn-full-height {
border-right: 0;
border-left: 1px solid @toolbar-border-color;
@@ -96,7 +102,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;
@@ -105,43 +112,31 @@
}
&.toolbar-small {
- height: 32px;
- > a, .toolbar-right > a {
- padding: 2px 4px 1px 4px;
- margin: 0;
- margin-top: 2px;
- }
- > a {
- margin-left: 2px;
- }
- .toolbar-right > a {
- margin-left: 0;
- margin-right: 2px;
- }
+ .toolbar-small-mixin;
}
&.toolbar-tall {
- height: 58px;
- padding-top: 10px;
- > a, .toolbar-right > a {
- padding: 4px 10px 5px;
- }
- > a.btn, .toolbar-right > a.btn {
- margin: 0 (@line-height-computed / 2);
- }
- .btn-group {
- margin: 0 (@line-height-computed / 2);
- > .btn-group {
- margin: 0;
- }
- }
+ .toolbar-small-mixin;
}
&.toolbar-alt {
- background-color: #fafafa;
+ .toolbar-alt-mixin;
}
}
+
+.toolbar-small-mixin() {
+ height: 32px;
+}
+
+.toolbar-tall-mixin() {
+ height: 58px;
+ padding-top: 10px;
+}
+.toolbar-alt-mixin() {
+ background-color: @toolbar-alt-bg-color;
+}
+
.toolbar-label {
display: none;
margin: 0 4px;
diff --git a/services/web/public/stylesheets/app/translations.less b/services/web/public/stylesheets/app/translations.less
index 3b79b94aff..7ae7532b6c 100644
--- a/services/web/public/stylesheets/app/translations.less
+++ b/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 {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 0b5d3bf744..47030d08ff 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -794,7 +794,9 @@
@left-menu-animation-duration: 0.35s;
@toolbar-border-color: @gray-lighter;
-@file-tree-droppable-background-color: rgb(252, 231, 199);
+@common-border-color: @gray-lighter;
+@editor-border-color: @gray-lighter;
+@file-tree-droppable-bg-color: rgb(252, 231, 199);
@editor-dark-background-color: #333;
@editor-dark-toolbar-border-color: #222;
@@ -876,16 +878,43 @@
@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 : 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%);
// 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 43646ec542..4911a9d2c4 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -8,7 +8,7 @@
@ol-blue-gray-1 : #E4E8EE;
@ol-blue-gray-2 : #9DA7B7;
@ol-blue-gray-3 : #5D6879;
-@ol-blue-gray-4 : #485973;
+@ol-blue-gray-4 : #455265;
@ol-blue-gray-5 : #2C3645;
@ol-blue-gray-6 : #1E2530;
@@ -156,6 +156,34 @@
@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;
+@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;
+@toolbar-border-bottom : 1px solid @toolbar-border-color;
+// Editor file-tree
+@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.