From e184d4b14019c9c22017e4fa67a1a08d983a5f4e Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 20 May 2021 14:11:58 +0300
Subject: [PATCH] [Embedded] Fix styles

---
 apps/common/embed/resources/less/common.less    | 14 +++++++++++---
 apps/documenteditor/embed/index.html            |  4 +++-
 apps/documenteditor/embed/index.html.deploy     |  4 +++-
 apps/presentationeditor/embed/index.html        |  4 +++-
 apps/presentationeditor/embed/index.html.deploy |  4 +++-
 apps/spreadsheeteditor/embed/index.html         |  4 +++-
 apps/spreadsheeteditor/embed/index.html.deploy  |  4 +++-
 7 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less
index 23a69e9208..20482b4527 100644
--- a/apps/common/embed/resources/less/common.less
+++ b/apps/common/embed/resources/less/common.less
@@ -55,10 +55,11 @@
 
 @toolbarBorderColor:            #dbdbdb;
 @toolbarBorderShadowColor:      #FAFAFA;
-@toolbarTopColor:               #EBEBEB;
+@toolbarTopColor:               #F7F7F7;
 @toolbarBottomColor:            #CCCCCC;
 @toolbarHoverColor:             #7698DE;
 @toolbarFontSize:               12px;
+@buttonFontSize:                11px;
 @controlBtnHoverTopColor:       #6180C4;
 @controlBtnHoverBottomColor:    #8AACF1;
 @btnColor:                      #d8dadc;
@@ -246,6 +247,7 @@
     height: 22px;
     background-origin: content-box;
     padding: 0 1px;
+    font-size: @buttonFontSize;
 
     &.has-caption {
         width: auto;
@@ -253,11 +255,12 @@
     }
 
     &.colored {
-        padding: 0 14px;
+        padding: 0 16px;
         height: 28px;
         background-color: @btnColored;
         border-radius: 3px;
         color: #ffffff;
+        font-weight: 700;
     }
 
     // Hover state
@@ -547,7 +550,7 @@
     width: @icon-width;
     height: @icon-height;
     float: left;
-    margin: 0 15px 0 -35px;
+    margin: -3px 15px 0 -35px;
 }
 .btn-icon {
     width: 22px;
@@ -625,6 +628,11 @@
             background-color: @btnColor;
             outline: 0 none;
         }
+        font-size: @buttonFontSize;
+    }
+
+    .divider {
+        margin: 4px 0;
     }
 }
 
diff --git a/apps/documenteditor/embed/index.html b/apps/documenteditor/embed/index.html
index 9edb823a78..7a0b2fb5f9 100644
--- a/apps/documenteditor/embed/index.html
+++ b/apps/documenteditor/embed/index.html
@@ -30,7 +30,9 @@
             width: 100%;
             position: absolute;
             height: 48px;
-            background-color: #e2e2e2;
+            background-color: #F7F7F7;
+            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
+            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
         }
 
         .loadmask > .brendpanel > div {
diff --git a/apps/documenteditor/embed/index.html.deploy b/apps/documenteditor/embed/index.html.deploy
index 3c045313fc..4cdbc7f05b 100644
--- a/apps/documenteditor/embed/index.html.deploy
+++ b/apps/documenteditor/embed/index.html.deploy
@@ -28,7 +28,9 @@
             width: 100%;
             position: absolute;
             height: 48px;
-            background-color: #e2e2e2;
+            background-color: #F7F7F7;
+            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
+            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
         }
 
         .loadmask > .brendpanel > div {
diff --git a/apps/presentationeditor/embed/index.html b/apps/presentationeditor/embed/index.html
index 6aa8666934..0f58d02a36 100644
--- a/apps/presentationeditor/embed/index.html
+++ b/apps/presentationeditor/embed/index.html
@@ -30,7 +30,9 @@
             width: 100%;
             position: absolute;
             height: 48px;
-            background-color: #e2e2e2;
+            background-color: #F7F7F7;
+            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
+            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
         }
 
         .loadmask > .brendpanel > div {
diff --git a/apps/presentationeditor/embed/index.html.deploy b/apps/presentationeditor/embed/index.html.deploy
index c65e1ea480..5db22646cd 100644
--- a/apps/presentationeditor/embed/index.html.deploy
+++ b/apps/presentationeditor/embed/index.html.deploy
@@ -28,7 +28,9 @@
             width: 100%;
             position: absolute;
             height: 48px;
-            background-color: #e2e2e2;
+            background-color: #F7F7F7;
+            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
+            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
         }
 
         .loadmask > .brendpanel > div {
diff --git a/apps/spreadsheeteditor/embed/index.html b/apps/spreadsheeteditor/embed/index.html
index 0f7b732ebb..2ba2a765a6 100644
--- a/apps/spreadsheeteditor/embed/index.html
+++ b/apps/spreadsheeteditor/embed/index.html
@@ -30,7 +30,9 @@
             width: 100%;
             position: absolute;
             height: 48px;
-            background-color: #e2e2e2;
+            background-color: #F7F7F7;
+            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
+            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
         }
 
         .loadmask > .brendpanel > div {
diff --git a/apps/spreadsheeteditor/embed/index.html.deploy b/apps/spreadsheeteditor/embed/index.html.deploy
index da6dcb3073..13573b7032 100644
--- a/apps/spreadsheeteditor/embed/index.html.deploy
+++ b/apps/spreadsheeteditor/embed/index.html.deploy
@@ -27,7 +27,9 @@
             width: 100%;
             position: absolute;
             height: 48px;
-            background-color: #e2e2e2;
+            background-color: #F7F7F7;
+            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
+            box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
         }
 
         .loadmask > .brendpanel > div {