From 5f6956ac0f09d091cbcd63766406849a0d1ed501 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 4 Jan 2021 00:58:06 +0300
Subject: [PATCH] [stylesheets] repaired stylesheets

---
 apps/common/main/lib/component/Button.js      |  8 ++++----
 apps/common/main/lib/component/ColorButton.js |  4 +++-
 apps/common/main/lib/component/ComboBox.js    |  4 +++-
 .../main/lib/component/ComboBoxFonts.js       |  2 +-
 .../main/resources/less/asc-mixins.less       |  1 +
 apps/common/main/resources/less/buttons.less  |  3 +--
 .../resources/less/colors-table-dark.less     |  1 +
 .../main/resources/less/colors-table.less     |  3 +++
 apps/common/main/resources/less/combobox.less |  1 +
 .../main/resources/less/dropdown-menu.less    | 19 ++++++++++++++-----
 .../main/resources/less/dropdown-submenu.less |  2 +-
 .../main/resources/less/language-dialog.less  |  4 ++--
 .../main/resources/less/rightmenu.less        |  2 +-
 .../main/resources/less/rightmenu.less        |  2 +-
 .../main/resources/less/rightmenu.less        |  2 +-
 15 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 50c2c4020..20537209d 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -211,7 +211,7 @@ define([
                 '</div>' +
                 '<div class="inner-box-caption">' +
                     '<span class="caption"><%= caption %></span>' +
-                    '<i class="caret img-commonctrl"></i>' +
+                    '<i class="caret"></i>' +
                 '</div>' +
             '</button>' +
         '</div>';
@@ -226,7 +226,7 @@ define([
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                 '<span class="btn-fixflex-vcenter">' +
                     '<span class="caption"><%= caption %></span>' +
-                    '<i class="caret img-commonctrl"></i>' +
+                    '<i class="caret"></i>' +
                 '</span>' +
             '</button>' +
         '</div>';
@@ -271,7 +271,7 @@ define([
                         '<% applyicon() %>',
                         '<span class="caption"><%= caption %></span>',
                         '<span class="inner-box-caret">' +
-                            '<i class="caret img-commonctrl"></i>' +
+                            '<i class="caret"></i>' +
                         '</span>',
                     '</button>',
                 '</div>',
@@ -282,7 +282,7 @@ define([
                         '<span class="caption"><%= caption %></span>',
                     '</button>',
                     '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
-                        '<i class="caret img-commonctrl"></i>',
+                        '<i class="caret"></i>',
                         '<span class="sr-only"></span>',
                     '</button>',
                 '</div>',
diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 15b02c0bb..0772ea36a 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -50,7 +50,9 @@ define([
             '<div class="btn-group" id="<%= id %>">',
                 '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
                     '<span>&nbsp;</span>',
-                    '<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
+                    '<span class="inner-box-caret">',
+                        '<i class="caret"></i>',
+                    '</span>',
                 '</button>',
             '</div>'
         ].join('')),
diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index ea12b5b55..6ce06e261 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -93,7 +93,9 @@ define([
             template: _.template([
                 '<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false">',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                        '<span class="caret"></span>',
+                    '</button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<% _.each(items, function(item) { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js
index 070536ade..0fdac2f33 100644
--- a/apps/common/main/lib/component/ComboBoxFonts.js
+++ b/apps/common/main/lib/component/ComboBoxFonts.js
@@ -72,7 +72,7 @@ define([
                 '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false"> ',
                     '<div style="display: table-cell;"></div>',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<li class="divider">',
                     '<% _.each(items, function(item) { %>',
diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 875829da0..d81b32507 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -207,6 +207,7 @@
 {
     background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/@{common-controls}')), ~"url(@{common-image-const-path}/@{common-controls})");
     background-repeat: no-repeat;
+    filter: @component-normal-icon-filer;
 
     @1d5ximage: replace(@common-controls, '\.png$', '@1.5x.png');
     @2ximage: replace(@common-controls, '\.png$', '@2x.png');
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 9428f7612..cce8777a1 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -564,7 +564,7 @@
 
     .inner-box-caret {
         position: absolute;
-        right: 0;
+        right: 1px;
         top: 2px;
     }
 
@@ -594,7 +594,6 @@
     &:active:not(.disabled),
     &.active:not(.disabled) {
         .caret {
-            background-position: @arrow-small-offset-x @arrow-small-offset-y;
         }
     }
 }
diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index 3c94245d8..c9e7751bd 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -74,5 +74,6 @@
         --modal-window-mask-opacity: 0.6;
         --image-border-types-filter: invert(100%) brightness(4);
         --image-border-types-filter-selected: invert(100%) brightness(4);
+        --component-normal-icon-filter: invert(100%);
     }
 }
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 70f462e4d..b95b8c150 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -85,6 +85,7 @@
     --modal-window-mask-opacity: 0.2;
     --image-border-types-filter: none;
     --image-border-types-filter-selected: none;
+    --component-normal-icon-filter: none;
 }
 
 // Background
@@ -149,3 +150,5 @@
 
 @button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
 @button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
+
+@component-normal-icon-filer: var(--component-normal-icon-filter);
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index 5f0b8b2f9..578631342 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -52,6 +52,7 @@
     &.open .dropdown-toggle.btn-default {
         background-color: @background-normal;
         border-color: @border-regular-control;
+        padding-right: 4px;
     }
 
     .btn-default.disabled:hover {
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 0167e3e2d..241387df0 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -40,16 +40,25 @@
             }
 
             &.focus {
-                text-decoration: none;
-                color: @dropdown-link-hover-color;
-                background-color: @dropdown-link-hover-bg;
+                //text-decoration: none;
+                //color: @dropdown-link-hover-color;
+                //background-color: @dropdown-link-hover-bg;
+            }
+
+            &:hover {
+                color: @text-normal-pressed;
+                background-color: @highlight-button-hover;
             }
         }
 
         &.over > a {
             text-decoration: none;
-            color: @dropdown-link-hover-color;
-            background-color: @dropdown-link-hover-bg;
+            color: @text-normal-pressed;
+            background-color: @highlight-button-hover;
+
+            &:after {
+                border-left-color: @icon-normal-pressed;
+            }
         }
 
         .checked:not(.no-checkmark) {
diff --git a/apps/common/main/resources/less/dropdown-submenu.less b/apps/common/main/resources/less/dropdown-submenu.less
index 7376a2686..b8114469a 100644
--- a/apps/common/main/resources/less/dropdown-submenu.less
+++ b/apps/common/main/resources/less/dropdown-submenu.less
@@ -23,7 +23,7 @@
         border-color: transparent;
         border-style: solid;
         border-width: 3px 0 3px 3px;
-        border-left-color: @dropdown-link-color;
+        border-left-color: @icon-normal;
         margin-top: 5px;
         margin-right: -10px;
     }
diff --git a/apps/common/main/resources/less/language-dialog.less b/apps/common/main/resources/less/language-dialog.less
index 3c82f1a58..725c3899e 100644
--- a/apps/common/main/resources/less/language-dialog.less
+++ b/apps/common/main/resources/less/language-dialog.less
@@ -12,7 +12,7 @@ li {
 
   &.selected, a.checked {
     .icon.spellcheck-lang {
-      background-position-x: -20px; --bgX: -20px;
+        background-position-x: @button-small-active-icon-offset-x;
     }
   }
 }
@@ -26,7 +26,7 @@ li {
       background-color: @highlight-button-pressed;
 
       &, &:hover, &:focus {
-        color: @dropdown-link-active-color;
+        color: @text-normal-pressed;
       }
     }
   }
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 7a674e601..4daffbd3a 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -78,7 +78,7 @@
         width: 100%;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid @border-toolbar;
+        //border: 1px solid @border-toolbar;
         height: 100%;
 
         &.disabled {
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index e0764c901..ee1cff609 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -70,7 +70,7 @@
         width: 100%;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid @border-toolbar;
+        //border: 1px solid @border-toolbar;
         height: 100%;
 
         &.disabled {
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 6bbd70cdd..ef701d113 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -70,7 +70,7 @@
         width: 100%;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid @border-toolbar;
+        //border: 1px solid @border-toolbar;
         height: 100%;
 
         &.disabled {