colored version

apps/common/main/resources/less/header.less

@@ -63,6 +63,7 @@
         overflow: hidden;
         min-width: 50px;
         text-align: right;
+        color: #fff;
     }
 
     #rib-save-status {
@@ -112,6 +113,10 @@
 
 #slot-btn-back {
     float: right;
+
+    .btn .icon {
+        fill: #fff;
+    }
 }
 
 .btn-users {

apps/common/main/resources/less/toolbar.less

@@ -1,7 +1,7 @@
 @height-tabs: 40px;
 @height-controls: 67px;
 
-@tabs-bg-color: #fff;
+//@tabs-bg-color: #fff;
 
 .toolbar {
     position: relative;
@@ -84,7 +84,8 @@
         cursor: default;
         font-size: 12px;
         text-align: center;
-        color: @gray-deep;
+        color: #fff;
+        font-weight: bold;
 
         &::after {
           display: block;
@@ -99,15 +100,15 @@
 
       &.active {
         > a {
-          font-weight: bold;
+          //font-weight: bold;
         }
       }
     }
 
     .marker {
       position: relative;
-      border-top: 3px solid @gray-darker;
-      top: -5px;
+      border-top: 3px solid #fff;
+      top: -10px;
       -webkit-transition: width .2s, left .2s ease-out;
       opacity: 1;
       transition: width .2s, left .2s ease-out, opacity .2s;

apps/documenteditor/main/resources/less/toolbar.less

@@ -1,4 +1,6 @@
 
+@tabs-bg-color: #5170b5;
+
 #toolbar {
     //z-index: 101;
 }

apps/presentationeditor/main/resources/less/toolbar.less

@@ -1,3 +1,4 @@
+@tabs-bg-color: #c65d27;
 
 .toolbar {
     &:not(.cover) {

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -1,3 +1,5 @@
+@tabs-bg-color: #7e983f;
+
 .toolbar {
     &:not(.cover) {
         z-index: 102;