From 66ff7cf201f906502807fee379f9b28000a64a5e Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 16 Feb 2021 11:37:33 +0300
Subject: [PATCH] [dark theme] fix SSE stylesheets for IE support

---
 .../resources/less/advanced-settings.less     |  1 +
 .../main/resources/less/celleditor.less       | 13 ++++++++++
 .../main/resources/less/filterdialog.less     |  6 +++++
 .../main/resources/less/layout.less           |  4 ++++
 .../main/resources/less/leftmenu.less         | 14 +++++++++++
 .../main/resources/less/rightmenu.less        |  3 +++
 .../main/resources/less/spellcheck.less       |  1 +
 .../main/resources/less/statusbar.less        | 24 +++++++++++++++++++
 .../main/resources/less/toolbar.less          |  4 ++++
 .../main/resources/less/variables.less        |  1 +
 10 files changed, 71 insertions(+)

diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 29b010977..42eebbcdb 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -92,6 +92,7 @@
 
 .sort-dialog-btn-caret {
     display: inline-block;
+    border: @scaled-one-px-value-ie solid #cfcfcf;
     border: @scaled-one-px-value solid #cfcfcf;
     border-radius: 1px;
 }
diff --git a/apps/spreadsheeteditor/main/resources/less/celleditor.less b/apps/spreadsheeteditor/main/resources/less/celleditor.less
index 135135a97..1cf73a6e6 100644
--- a/apps/spreadsheeteditor/main/resources/less/celleditor.less
+++ b/apps/spreadsheeteditor/main/resources/less/celleditor.less
@@ -1,13 +1,18 @@
 #cell-editing-box {
+    border-bottom: solid @scaled-one-px-value-ie @border-toolbar-ie;
     border-bottom: solid @scaled-one-px-value @border-toolbar;
+    border-left: solid @scaled-one-px-value-ie @border-toolbar-ie;
     border-left: solid @scaled-one-px-value @border-toolbar;
     min-height: 20px;
+    background-color: @background-normal-ie;
     background-color: @background-normal;
 
     .ce-group-name {
         float: left;
         height: 20px;
+        border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-bottom: @scaled-one-px-value solid @border-toolbar;
+        background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
 
         #ce-cell-name {
@@ -17,11 +22,13 @@
             vertical-align: top;
             display: inline-block;
             border: 0 none;
+            border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-right: @scaled-one-px-value solid @border-toolbar;
             transition: none;
             -webkit-transition: none;
 
             &[disabled] {
+                color: @border-preview-select-ie;
                 color: @border-preview-select;
                 opacity: 0.5;
             }
@@ -31,9 +38,11 @@
             display: inline-block;
             position: absolute;
             left: 80px;
+            background-color: @background-toolbar-ie;
             background-color: @background-toolbar;
 
             button {
+                background-color: @background-normal-ie;
                 background-color: @background-normal;
                 height: 19px;
 
@@ -75,6 +84,7 @@
         padding-left: 1px;
         margin: 0 16px 0 120px;
         height: 100%;
+        border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-left: @scaled-one-px-value solid @border-toolbar;
 
         #ce-cell-content {
@@ -87,6 +97,7 @@
             padding-bottom: 0;
 
             &[disabled] {
+                color: @border-preview-select-ie;
                 color: @border-preview-select;
                 opacity: 0.5;
             }
@@ -102,7 +113,9 @@
         border-bottom: 0 none;
 
         &.move {
+            border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-top: @scaled-one-px-value solid @border-toolbar;
+            border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-bottom: @scaled-one-px-value solid @border-toolbar;
             opacity: 0.4;
         }
diff --git a/apps/spreadsheeteditor/main/resources/less/filterdialog.less b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
index 0a359c598..f0cba4209 100644
--- a/apps/spreadsheeteditor/main/resources/less/filterdialog.less
+++ b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
@@ -17,14 +17,19 @@
   }
 
   .border-values {
+    border: @scaled-one-px-value-ie solid @input-border;
     border: @scaled-one-px-value solid @input-border;
 
     .item {
       &.selected {
+        background-color: @highlight-button-hover-ie;
         background-color: @highlight-button-hover;
+        border-color: @highlight-button-hover-ie;
         border-color: @highlight-button-hover;
+        color: @text-normal-ie;
         color: @text-normal;
         border-style: solid;
+        border-width: @scaled-one-px-value-ie 0;
         border-width: @scaled-one-px-value 0;
       }
     }
@@ -94,6 +99,7 @@
       }
 
       &.border {
+        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
         border: @scaled-one-px-value solid @border-regular-control;
         .border-radius(1px);
         width: 22px;
diff --git a/apps/spreadsheeteditor/main/resources/less/layout.less b/apps/spreadsheeteditor/main/resources/less/layout.less
index a4fbc2a08..54b5f4216 100644
--- a/apps/spreadsheeteditor/main/resources/less/layout.less
+++ b/apps/spreadsheeteditor/main/resources/less/layout.less
@@ -2,6 +2,7 @@ body {
     width: 100%;
     height: 100%;
     .user-select(none);
+    color: @text-normal-ie;
     color: @text-normal;
 
     &.safari {
@@ -33,6 +34,7 @@ label {
     top:0;
     right: 0;
     bottom: 0;
+    background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
 }
@@ -52,7 +54,9 @@ label {
     }
 
     #editor_sdk {
+        border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-top: @scaled-one-px-value solid @border-toolbar;
+        border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-left: @scaled-one-px-value solid @border-toolbar;
     }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 8b732e6dc..bc93138a4 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -5,7 +5,9 @@
         border-right: 0 none;
 
         &.move {
+            border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-left: @scaled-one-px-value solid @border-toolbar;
+            border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-right: @scaled-one-px-value solid @border-toolbar;
             opacity: 0.4;
         }
@@ -20,6 +22,7 @@
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
+    background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
 }
@@ -57,11 +60,13 @@
                 margin-bottom: 3px;
 
                 &:hover:not(.disabled) {
+                    background-color: @highlight-button-hover-ie;
                     background-color: @highlight-button-hover;
                 }
 
                 &.active:not(.disabled) {
                     outline: 0;
+                    background-color: @highlight-button-pressed-ie;
                     background-color: @highlight-button-pressed;
 
                     > a {
@@ -71,6 +76,7 @@
 
                 &.disabled > a {
                     cursor: default;
+                    color: @border-regular-control-ie;
                     color: @border-regular-control;
                 }
             }
@@ -105,6 +111,7 @@
     .panel-context {
         width: 100%;
         padding-left: 260px;
+        background-color: @background-normal-ie;
         background-color: @background-normal;
 
         .content-box {
@@ -155,6 +162,7 @@
 
             #id-settings-menu {
                 .dataview {
+                    border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border-right: @scaled-one-px-value solid @border-toolbar;
 
                     & > div:not([class^=ps-scrollbar]) {
@@ -178,10 +186,12 @@
 
                         &:hover,
                         &.over {
+                            background-color: @background-toolbar-ie;
                             background-color: @background-toolbar;
                         }
 
                         &.selected {
+                            background-color: @highlight-button-pressed-ie;
                             background-color: @highlight-button-pressed;
                             color: @dropdown-link-active-color;
 
@@ -323,6 +333,7 @@
 
                 &:hover,
                 &.over {
+                    background-color: @background-toolbar-ie;
                     background-color: @background-toolbar;
                 }
 
@@ -364,6 +375,7 @@
             }
 
             .dataview {
+                border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                 border-right: @scaled-one-px-value solid @border-toolbar;
 
                 & > div:not([class^=ps-scrollbar]) {
@@ -378,10 +390,12 @@
                     &:not(.header-name) {
                         &:hover,
                         &.over {
+                            background-color: @background-toolbar-ie;
                             background-color: @background-toolbar;
                         }
 
                         &.selected {
+                            background-color: @highlight-button-pressed-ie;
                             background-color: @highlight-button-pressed;
                             color: @dropdown-link-active-color;
                         }
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index a0d49f3f2..ebb997c02 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -15,9 +15,11 @@
 .combo-dataview-menu {
     .form-control {
         cursor: pointer;
+        background-color: @background-normal-ie;
         background-color: @background-normal;
 
         &.text {
+            background: @background-normal-ie;
             background: @background-normal;
             vertical-align: bottom;
         }
@@ -162,6 +164,7 @@
 
         &:hover,
         &.over {
+            background-color: @highlight-button-hover-ie;
             background-color: @highlight-button-hover;
 
             .caret {
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
index a86131602..1582d2759 100644
--- a/apps/spreadsheeteditor/main/resources/less/spellcheck.less
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -19,6 +19,7 @@
 #spellcheck-suggestions-list {
     width: 100%;
     height: 116px;
+    background-color: @background-normal-ie;
     background-color: @background-normal;
     margin-bottom: 8px;
 }
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index 0d5f76f26..180ddf70d 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -23,6 +23,7 @@
             text-align: center;
 
             &.disabled {
+                color: @border-preview-select-ie;
                 color: @border-preview-select;
                 cursor: default;
             }
@@ -93,6 +94,7 @@
                     height: 12px;
                     display: inline-block;
                     vertical-align: middle;
+                    border: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border: @scaled-one-px-value solid @border-toolbar;
                 }
 
@@ -111,7 +113,9 @@
     #status-addtabs-box {
         float: left;
         padding: 3px 8px 0 8px;
+        border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-left: @scaled-one-px-value solid @border-toolbar;
+        border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-right: @scaled-one-px-value solid @border-toolbar;
         height: 25px;
     }
@@ -155,6 +159,7 @@
             display: flex;
 
             > li {
+                background-color: @background-toolbar-ie;
                 background-color: @background-toolbar;
 
                 &:first-of-type {
@@ -175,22 +180,31 @@
                     padding: 0 10px 0;
                     line-height: 24px;
                     margin-right: -1px;
+                    background-color: @background-toolbar-additional-ie;
                     background-color: @background-toolbar-additional;
                     outline: none;
+                    border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border-left: @scaled-one-px-value solid @border-toolbar;
+                    border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border-right: @scaled-one-px-value solid @border-toolbar;
+                    border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border-top: @scaled-one-px-value solid @border-toolbar;
 
                     &:hover {
+                        border-top-color: @border-toolbar-ie;
                         border-top-color: @border-toolbar;
+                        border-bottom-color: @border-toolbar-ie;
                         border-bottom-color: @border-toolbar;
+                        color: @text-normal-ie !important;
                         color: @text-normal !important;
                     }
                 }
 
                 &.active {
                     > span {
+                        border-bottom-color: @background-toolbar-ie;
                         border-bottom-color: @background-toolbar;
+                        background-color: @background-toolbar-ie;
                         background-color: @background-toolbar;
                         outline: none;
 
@@ -203,9 +217,12 @@
 
                 &.selected {
                     > span {
+                        border-bottom-color: @highlight-header-button-hover-ie;
                         border-bottom-color: @highlight-header-button-hover;
+                        background-color: @background-normal-ie;
                         background-color: @background-normal;
                         box-shadow: 0px 4px 0 #49795d inset;
+                        color: @text-normal-ie;
                         color: @text-normal;
                     }
                 }
@@ -257,6 +274,7 @@
 
                 &:not(.active) {
                     > span {
+                        color: @text-secondary-ie;
                         color: @text-secondary;
                     }
                 }
@@ -270,13 +288,16 @@
                     }
 
                     > span {
+                        border-left: 2px solid @text-normal-ie;
                         border-left: 2px solid @text-normal;
                         padding-left: 9px;
                     }
                     
                     &.right {
                         > span {
+                            border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
                             border-left: @scaled-one-px-value solid @border-toolbar;
+                            border-right: 2px solid @text-normal-ie;
                             border-right: 2px solid @text-normal;
                             padding-right: 9px;
                             padding-left: 10px;
@@ -295,10 +316,12 @@
                 }
                 &.separator-item {
                     margin-left: 20px;
+                    width: @scaled-one-px-value-ie;
                     width: @scaled-one-px-value;
                     > span {
                         padding: 0;
                         margin: 0;
+                        width: @scaled-one-px-value-ie;
                         width: @scaled-one-px-value;
                         &::after {
                             content: none;
@@ -390,6 +413,7 @@
     width: 36px;
     height: 100%;
     opacity: 0;
+    background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     z-index: @zindex-modal - 1;
 }
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 2818576b2..4f4345f59 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -106,7 +106,9 @@
 #id-toolbar-menu-auto-fontcolor > a.selected,
 #id-toolbar-menu-auto-fontcolor > a:hover {
     span {
+        outline: @scaled-one-px-value-ie solid @border-regular-control-ie;
         outline: @scaled-one-px-value solid @border-regular-control;
+        border: @scaled-one-px-value-ie solid @background-normal-ie;
         border: @scaled-one-px-value solid @background-normal;
     }
 }
@@ -115,7 +117,9 @@
 #autocorrect-paste-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;
+    background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
+    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border: @scaled-one-px-value solid @border-regular-control;
 }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/variables.less b/apps/spreadsheeteditor/main/resources/less/variables.less
index 596e73e46..bf8293b92 100644
--- a/apps/spreadsheeteditor/main/resources/less/variables.less
+++ b/apps/spreadsheeteditor/main/resources/less/variables.less
@@ -1,6 +1,7 @@
 //
 // Variables
 // --------------------------------------------------
+@header-background-color-ie: @toolbar-header-spreadsheet-ie;
 @header-background-color: var(--toolbar-header-spreadsheet);
 
 // Active color