From 7a0c2b2381617e851e56f87cc7a2bfbcdc6f3662 Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Tue, 9 Jul 2024 18:36:07 +0300
Subject: [PATCH 1/6] [SSE DE PE] Update title doc name style

---
 apps/common/main/resources/less/header.less | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 2855e0fabc..52e27c4494 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -575,7 +575,7 @@
         display: flex;
         justify-content: center;
         overflow: hidden;
-        padding: 4px 2px;
+        padding: 0px 2px;
     }
 
     #title-doc-name {
@@ -585,15 +585,21 @@
         text-align: center;
         .font-size-medium();
         line-height: 24px;
-        padding: 1px 5px;
+        padding: 1px 8px;
         background-color: transparent;
         border: 0 none;
         cursor: default;
         .user-select(text);
 
-        &:hover:not(:disabled),&:focus{
-            box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
-            box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
+        &:hover:not(:disabled):not(:focus){
+            background-color: @highlight-header-button-hover-ie;
+            background-color: @highlight-header-button-hover;
+            border-radius: 1px;
+            cursor: text;
+        }
+        &:focus{
+            background-color: @highlight-header-button-pressed-ie;
+            background-color: @highlight-header-button-pressed;
             border-radius: 1px;
             cursor: text;
         }

From 8b7e20c7dc69d804ea600a20837415b4f3c0db6d Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <Basher0303@yandex.ru>
Date: Thu, 18 Jul 2024 13:58:46 +0300
Subject: [PATCH 2/6] [SSE DE PE] Update title doc name style for compact and
 no tabs modes

---
 apps/common/main/lib/view/Header.js          |  2 +-
 apps/common/main/resources/less/header.less  | 17 +++++++++++------
 apps/common/main/resources/less/toolbar.less | 19 ++++++++++++++-----
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 6b8e46d7c1..3c6d3d9a51 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -85,7 +85,7 @@ define([
                                 //'<label id="rib-doc-name" />' +
                                 '<input id="rib-doc-name" autofill="off" autocomplete="off"/></input>' +
                             '</section>' +
-                            '<section style="display: inherit;">' +
+                            '<section id="box-right-btn-group" style="display: inherit;">' +
                                 '<div class="hedset">' +
                                     '<div class="btn-slot margin-right-2" id="slot-btn-header-form-submit"></div>' +
                                     '<div class="btn-slot margin-right-2" id="slot-btn-start-fill"></div>' +
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 52e27c4494..abcfbfc513 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -96,7 +96,7 @@
         flex-grow: 1;
         display: flex;
         justify-content: center;
-        padding: 4px 2px;
+        padding: 0px 2px;
         overflow: hidden;
         flex-shrink: 0;
     }
@@ -111,14 +111,19 @@
         color: @text-toolbar-header;
         background-color: transparent;
         border: 0 none;
-        padding: 1px 5px;
+        border-radius: 1px;
+        padding: 1px 8px;
         cursor: default;
         line-height: 24px;
 
-        &:hover:not(:disabled),&:focus {
-            box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
-            box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
-            border-radius: 1px;
+        &:hover:not(:disabled):not(:focus){
+            background-color: @highlight-header-button-hover-ie;
+            background-color: @highlight-header-button-hover;
+            cursor: text;
+        }
+        &:focus{
+            background-color: @highlight-header-button-pressed-ie;
+            background-color: @highlight-header-button-pressed;
             cursor: text;
         }
         .rtl & {
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index b341f95d7b..2ee663a2ae 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -488,8 +488,8 @@
 
         .tabs, .box-tabs .extra {
             background-color: transparent;
-            box-shadow: inset 0 -1px 0 0 @border-regular-control-ie;
-            box-shadow: inset 0 -1px 0 0 @border-regular-control;
+            box-shadow: inset 0 calc(-1 * @scaled-one-px-value-ie) 0 0 @border-regular-control-ie;
+            box-shadow: inset 0 calc(-1 * @scaled-one-px-value) 0 0 @border-regular-control;
         }
 
         .tabs {
@@ -679,9 +679,13 @@
         #rib-doc-name {
             color: @text-normal-ie;
             color: @text-normal;
-            &:hover:not(:disabled),&:focus {
-                box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-button-hover-ie;
-                box-shadow: 0 0 0 @scaled-one-px-value @highlight-button-hover;
+            &:hover:not(:disabled):not(:focus){
+                background-color: @highlight-button-hover-ie;
+                background-color: @highlight-button-hover;
+            }
+            &:focus{
+                background-color: @highlight-button-pressed-ie;
+                background-color: @highlight-button-pressed;
             }
         }
 
@@ -697,6 +701,11 @@
             display: none;
         }
     }
+
+    #box-doc-name, #box-right-btn-group {
+        padding-bottom: @scaled-one-px-value-ie;
+        padding-bottom: @scaled-one-px-value;
+    }
 }
 
 .toolbar-fullview-panel {

From 6cf8abec83386b2846821aa98a8aecb0cdabebbc Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <Basher0303@yandex.ru>
Date: Mon, 22 Jul 2024 17:20:38 +0300
Subject: [PATCH 3/6] [common] Change value for variable
 --highlight-header-button

---
 apps/common/main/resources/less/colors-table-classic.less    | 4 ++--
 .../main/resources/less/colors-table-dark-contrast.less      | 4 ++--
 apps/common/main/resources/less/colors-table-dark.less       | 4 ++--
 apps/common/main/resources/less/colors-table-ie-fix.less     | 4 ++--
 apps/common/main/resources/less/colors-table.less            | 4 ++--
 apps/documenteditor/main/index.html                          | 4 ++--
 apps/pdfeditor/main/index.html                               | 4 ++--
 apps/spreadsheeteditor/main/index.html                       | 5 +++--
 8 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less
index 81bbd0b3a9..c7631bbc60 100644
--- a/apps/common/main/resources/less/colors-table-classic.less
+++ b/apps/common/main/resources/less/colors-table-classic.less
@@ -30,8 +30,8 @@
         --highlight-primary-dialog-button-hover: #666d73;
         --highlight-accent-button-hover: #375478;
         --highlight-accent-button-pressed: #293f59;
-        --highlight-header-button-hover: fade(#fff, 20%);
-        --highlight-header-button-pressed: fade(#000, 20%);
+        --highlight-header-button-hover: fade(#000, 15%);
+        --highlight-header-button-pressed: fade(#000, 25%);
         --highlight-toolbar-tab-underline: #444;
         --highlight-text-select: #3494fb;
         --highlight-fill-button-hover: #ffe165;
diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less
index 84e6529e58..2c560d37bc 100644
--- a/apps/common/main/resources/less/colors-table-dark-contrast.less
+++ b/apps/common/main/resources/less/colors-table-dark-contrast.less
@@ -31,8 +31,8 @@
         --highlight-primary-dialog-button-hover: #a6a6a6;
         --highlight-accent-button-hover: #75a2d6;
         --highlight-accent-button-pressed: #89afdc;
-        --highlight-header-button-hover: #424242;
-        --highlight-header-button-pressed: #828282;
+        --highlight-header-button-hover: fade(#fff, 20%);
+        --highlight-header-button-pressed: fade(#fff, 35%);
         --highlight-toolbar-tab-underline: #d0d0d0;
         --highlight-text-select: #96c8fd;
         --highlight-fill-button-hover: #ffe165;
diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index 5e75793b39..c9e829fa05 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -31,8 +31,8 @@
         --highlight-primary-dialog-button-hover: #fcfcfc;
         --highlight-accent-button-hover: #75a2d6;
         --highlight-accent-button-pressed: #89afdc;
-        --highlight-header-button-hover: fade(#fff, 5%);
-        --highlight-header-button-pressed: fade(#fff, 15%);
+        --highlight-header-button-hover: fade(#fff, 15%);
+        --highlight-header-button-pressed: fade(#fff, 25%);
         --highlight-toolbar-tab-underline: #ddd;
         --highlight-text-select: #96c8fd;
         --highlight-fill-button-hover: #ffe165;
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 d4bb12d32e..7a5fb3f394 100644
--- a/apps/common/main/resources/less/colors-table-ie-fix.less
+++ b/apps/common/main/resources/less/colors-table-ie-fix.less
@@ -28,8 +28,8 @@
 @highlight-button-pressed-ie: #7d858c;
 @highlight-button-pressed-hover-ie: #7d858c;
 @highlight-primary-dialog-button-hover-ie: #666d73;
-@highlight-header-button-hover-ie: fade(#fff, 20%);
-@highlight-header-button-pressed-ie: fade(#000, 20%);
+@highlight-header-button-hover-ie: fade(#000, 15%);
+@highlight-header-button-pressed-ie: fade(#000, 25%);
 @highlight-toolbar-tab-underline-ie: #444;
 @highlight-text-select-ie: #3494fb;
 @highlight-accent-button-hover-ie: #375478;
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 5456980747..3ead50525a 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -42,8 +42,8 @@
     --highlight-primary-dialog-button-hover: #1c1c1c;
     --highlight-accent-button-hover: #375478;
     --highlight-accent-button-pressed: #293f59;
-    --highlight-header-button-hover: fade(#fff, 15%);
-    --highlight-header-button-pressed: fade(#fff, 25%);
+    --highlight-header-button-hover: fade(#000, 15%);
+    --highlight-header-button-pressed: fade(#000, 25%);
     --highlight-toolbar-tab-underline: #444;
     --highlight-text-select: #3494fb;
     --highlight-fill-button-hover: #ffe165;
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 5053cbf37d..11d936106a 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -15,7 +15,7 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #555;
-            --highlight-header-button-hover: rgba(255,255,255,.05);
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #555;
             /*--canvas-content-background: #fff;*/
             --skeleton-canvas-page-border: #555;
@@ -34,7 +34,7 @@
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
             --highlight-button-hover: #e0e0e0;
-            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --loadmask-canvas-page-border: #ccc;
         }
diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html
index 86deabad4e..e2cbd3e997 100644
--- a/apps/pdfeditor/main/index.html
+++ b/apps/pdfeditor/main/index.html
@@ -15,7 +15,7 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #555;
-            --highlight-header-button-hover: rgba(255,255,255,.05);
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #555;
             /*--canvas-content-background: #fff;*/
             --skeleton-canvas-page-border: #555;
@@ -34,7 +34,7 @@
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
             --highlight-button-hover: #e0e0e0;
-            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --loadmask-canvas-page-border: #ccc;
         }
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index efb14b6302..6caa8bd463 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -14,6 +14,7 @@
             --background-normal: #333;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #606060;
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
             --canvas-page-border: #555;
@@ -22,11 +23,11 @@
         .theme-classic-light {
         }
 
-        .theme-classic-light {
+        .theme-light {
             --background-toolbar: #f7f7f7;
             /*--border-toolbar: #cbcbcb;*/
             --highlight-button-hover: #ccc;
-            --highlight-header-button-hover: rgba(255,255,255,.15);
+            --highlight-header-button-hover: rgba(0,0,0,.15);
             --canvas-background: #eee;
             --canvas-page-border: #ccc;
         }

From 35b9776807a2722481f2c3d03bdaab836f8e974a Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <Basher0303@yandex.ru>
Date: Mon, 22 Jul 2024 17:22:01 +0300
Subject: [PATCH 4/6] [PE] Changed skeleton's stylesheet

---
 apps/presentationeditor/main/index.html | 31 +++++++++++++++++--------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index f772cc730d..d21cafd33e 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -14,13 +14,22 @@
             --background-toolbar: #404040;
             --border-toolbar: #2a2a2a;
             --highlight-button-hover: #606060;
+            --highlight-header-button-hover: rgba(255,255,255,.15);
             --canvas-background: #666666;
             /*--canvas-content-background: #fff;*/
             --canvas-page-border: #555;
         }
 
         .theme-classic-light {
-            --highlight-button-hover: #d8dadc;
+        }
+
+        .theme-light {
+            --background-toolbar: #f7f7f7;
+            /*--border-toolbar: #cbcbcb;*/
+            --highlight-button-hover: #ccc;
+            --highlight-header-button-hover: rgba(0,0,0,.15);
+            --canvas-background: #eee;
+            --canvas-page-border: #ccc;
         }
 
         .loadmask {
@@ -31,8 +40,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1002;
         }
 
@@ -72,7 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
         .loadmask > .brendpanel .circle {
@@ -82,11 +92,12 @@
             border-radius: 20px;
             margin: 0 10px;
             background: rgba(255,255,255,.2);
+            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
             border-bottom: 1px solid #cbcbcb;
             border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
@@ -103,8 +114,8 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ccc;
-            background: var(--highlight-button-hover, #ccc);
+            background: #d8dadc;
+            background: var(--highlight-button-hover, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -171,8 +182,8 @@
             width: 100%;
             background: #fff;
             background: var(--canvas-content-background, #fff);
-            border: 1px solid #ccc;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
+            border: 1px solid #bbbec2;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;

From 3b9181b3f49a5ec25a7b0d4b6f500caff48564a6 Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <Basher0303@yandex.ru>
Date: Mon, 22 Jul 2024 17:26:05 +0300
Subject: [PATCH 5/6] [common] Add padding for name input and right button
 group in toolbar

---
 apps/common/main/resources/less/header.less  | 5 +++++
 apps/common/main/resources/less/toolbar.less | 7 ++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index abcfbfc513..f37cac8087 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -131,6 +131,11 @@
         }
     }
 
+    #box-doc-name, #box-right-btn-group {
+        padding-bottom: @scaled-one-px-value-ie;
+        padding-bottom: @scaled-one-px-value;
+    }
+
     #rib-save-status {
         white-space: nowrap;
         &.locked {
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 2ee663a2ae..2f588cb93f 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -684,6 +684,8 @@
                 background-color: @highlight-button-hover;
             }
             &:focus{
+                color: @text-normal-pressed-ie;
+                color: @text-normal-pressed;
                 background-color: @highlight-button-pressed-ie;
                 background-color: @highlight-button-pressed;
             }
@@ -701,11 +703,6 @@
             display: none;
         }
     }
-
-    #box-doc-name, #box-right-btn-group {
-        padding-bottom: @scaled-one-px-value-ie;
-        padding-bottom: @scaled-one-px-value;
-    }
 }
 
 .toolbar-fullview-panel {

From f457649ed00da2f1961cf339f488cf9f9365cab9 Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <Basher0303@yandex.ru>
Date: Tue, 23 Jul 2024 19:16:40 +0300
Subject: [PATCH 6/6] [common] Fix default values in loader for toolbar tabs

---
 apps/documenteditor/main/index.html           |  8 +++----
 apps/documenteditor/main/index.html.deploy    |  8 +++----
 apps/pdfeditor/main/index.html                |  8 +++----
 apps/pdfeditor/main/index.html.deploy         |  8 +++----
 apps/presentationeditor/main/index.html       |  8 +++----
 .../presentationeditor/main/index.html.deploy | 22 ++++++++++---------
 apps/spreadsheeteditor/main/index.html        |  8 +++----
 apps/spreadsheeteditor/main/index.html.deploy |  8 +++----
 8 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 11d936106a..c14799816b 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -93,8 +93,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -103,8 +103,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 0088bb41f2..836849d965 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -71,8 +71,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -81,8 +81,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html
index e2cbd3e997..5f3fc9be08 100644
--- a/apps/pdfeditor/main/index.html
+++ b/apps/pdfeditor/main/index.html
@@ -88,8 +88,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -98,8 +98,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/pdfeditor/main/index.html.deploy b/apps/pdfeditor/main/index.html.deploy
index e6b8cb8fe7..23778bfdec 100644
--- a/apps/pdfeditor/main/index.html.deploy
+++ b/apps/pdfeditor/main/index.html.deploy
@@ -66,8 +66,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -76,8 +76,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index d21cafd33e..975a4b4d81 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -81,8 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -91,8 +91,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 677818bfe7..13e98dc5eb 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -19,8 +19,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #f0f0f0;
-            background: var(--canvas-background, #f0f0f0);
+            background: #e2e2e2;
+            background: var(--canvas-background, #e2e2e2);
             z-index: 1002;
         }
 
@@ -60,7 +60,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -69,12 +70,13 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
-            background: #f7f7f7;
-            background: var(--background-toolbar, #f7f7f7);
+            background: #f1f1f1;
+            background: var(--background-toolbar, #f1f1f1);
             border-bottom: 1px solid #cbcbcb;
             border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
@@ -91,8 +93,8 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ccc;
-            background: var(--highlight-button-hover, #ccc);
+            background: #d8dadc;
+            background: var(--highlight-button-hover, #d8dadc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -159,8 +161,8 @@
             width: 100%;
             background: #fff;
             background: var(--canvas-content-background, #fff);
-            border: 1px solid #ccc;
-            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
+            border: 1px solid #bbbec2;
+            border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 6caa8bd463..a56915598d 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -81,8 +81,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -91,8 +91,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 83f095d7c4..e5557024d5 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -59,8 +59,8 @@
             height: 12px;
             border-radius: 3px;
             margin: 0 10px;
-            background: rgba(255, 255, 255, 0.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .brendpanel .circle {
@@ -69,8 +69,8 @@
             height: 20px;
             border-radius: 20px;
             margin: 0 10px;
-            background: rgba(255,255,255,.2);
-            background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
+            background: rgba(0,0,0,.15);
+            background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
         }
 
         .loadmask > .sktoolbar {