diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js
index 5133e0101..dd8cf9f45 100644
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@@ -43,6 +43,10 @@ define([
"toolbar-header-spreadsheet",
"toolbar-header-presentation",
+ "text-toolbar-header-on-background-document",
+ "text-toolbar-header-on-background-spreadsheet",
+ "text-toolbar-header-on-background-presentation",
+
"background-normal",
"background-toolbar",
"background-toolbar-additional",
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 8af141287..bd7a1ba4f 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -110,7 +110,7 @@ define([
'' +
- '' +
@@ -138,7 +138,7 @@ define([
'' +
- '' +
diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less
index 88570b4ed..610768f56 100644
--- a/apps/common/main/resources/less/colors-table-classic.less
+++ b/apps/common/main/resources/less/colors-table-classic.less
@@ -5,6 +5,10 @@
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
+ --text-toolbar-header-on-background-document: #38567A;
+ --text-toolbar-header-on-background-spreadsheet: #336B49;
+ --text-toolbar-header-on-background-presentation: #8D4444;
+
--background-normal: #fff;
--background-toolbar: #f1f1f1;
--background-toolbar-additional: #f1f1f1;
diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index b05024c0b..fa525ed83 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -5,6 +5,10 @@
--toolbar-header-spreadsheet: #2a2a2a;
--toolbar-header-presentation: #2a2a2a;
+ --text-toolbar-header-on-background-document: #2a2a2a;
+ --text-toolbar-header-on-background-spreadsheet: #2a2a2a;
+ --text-toolbar-header-on-background-presentation: #2a2a2a;
+
--background-normal: #333;
--background-toolbar: #404040;
--background-toolbar-additional: #505050;
diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less
index e03a66ada..ad67d4525 100644
--- a/apps/common/main/resources/less/colors-table-ie-fix.less
+++ b/apps/common/main/resources/less/colors-table-ie-fix.less
@@ -3,6 +3,10 @@
@toolbar-header-spreadsheet-ie: #40865c;
@toolbar-header-presentation-ie: #aa5252;
+@text-toolbar-header-on-background-document-ie: #38567A;
+@text-toolbar-header-on-background-spreadsheet-ie: #336B49;
+@text-toolbar-header-on-background-presentation-ie: #8D4444;
+
@background-normal-ie: #fff;
@background-toolbar-ie: #f1f1f1;
@background-toolbar-additional-ie: #f1f1f1;
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 8b352170d..a4290ac8d 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -15,6 +15,10 @@
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
+ --text-toolbar-header-on-background-document: #38567A;
+ --text-toolbar-header-on-background-spreadsheet: #336B49;
+ --text-toolbar-header-on-background-presentation: #8D4444;
+
--background-normal: #fff;
--background-toolbar: #f7f7f7;
--background-toolbar-additional: #efefef;
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 20e714d90..a01e118a0 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -340,7 +340,10 @@
height: 100%;
width: 40px;
padding: 1px 3px;
+ border: var(--scaled-one-pixel, 1px) solid transparent;
+}
+.btn-current-user, .btn-header {
&:not(:disabled) .color-user-name {
opacity: @header-component-normal-icon-opacity;
}
@@ -352,17 +355,15 @@
&:hover:not(:disabled) .color-user-name {
opacity: @header-component-hover-icon-opacity;
}
-}
-.btn-current-user, .btn-header {
.color-user-name {
width: 20px;
height: 20px;
border-radius: 20px;
background-color: @icon-toolbar-header-ie;
background-color: @icon-toolbar-header;
- color: @header-background-color-ie;
- color: @header-background-color;
+ color: @toolbar-header-text-on-background-document-ie;
+ color: @toolbar-header-text-on-background-document;
font-size: 10px;
line-height: 20px;
overflow: hidden;
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 72e3f1976..40c34c3e5 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -461,6 +461,15 @@
}
// TODO: move to appropriate module
+ .btn-current-user, .btn-header {
+ .color-user-name {
+ background-color: @text-normal-ie;
+ background-color: @text-normal;
+ color: @text-inverse-ie;
+ color: @text-inverse;
+ }
+ }
+
.btn-header, .btn-users, .btn-header-share {
.icon {
&.icon--inverse {
@@ -520,16 +529,14 @@
fill: @text-normal-pressed;
}
}
- }
- }
- }
- .btn-current-user {
- .color-user-name {
- background-color: @text-normal-ie;
- background-color: @text-normal;
- color: @text-inverse-ie;
- color: @text-inverse;
+ .color-user-name {
+ background-color: @text-normal-pressed-ie;
+ background-color: @text-normal-pressed;
+ color: @highlight-button-pressed-ie;
+ color: @highlight-button-pressed;
+ }
+ }
}
}
diff --git a/apps/documenteditor/main/resources/less/variables.less b/apps/documenteditor/main/resources/less/variables.less
index 4c45439f5..e31d64a73 100644
--- a/apps/documenteditor/main/resources/less/variables.less
+++ b/apps/documenteditor/main/resources/less/variables.less
@@ -3,6 +3,8 @@
// --------------------------------------------------
@header-background-color-ie: @toolbar-header-document-ie;
@header-background-color: var(--toolbar-header-document);
+@toolbar-header-text-on-background-document-ie: @text-toolbar-header-on-background-document-ie;
+@toolbar-header-text-on-background-document: var(--text-toolbar-header-on-background-document);
// Active color
// -------------------------