From 8e81a7b0e1453eeb4fe0a3aadf6973a29731b92f Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 22 Jan 2021 00:18:15 +0300
Subject: [PATCH] [scaling] repaired some elements

---
 apps/common/main/resources/less/buttons.less  | 25 +++---
 apps/common/main/resources/less/checkbox.less |  6 +-
 apps/common/main/resources/less/comments.less | 18 ++--
 apps/common/main/resources/less/common.less   | 84 ++++++++++++++++++-
 apps/common/main/resources/less/dataview.less |  6 +-
 .../resources/less/multislider-gradient.less  | 22 ++---
 apps/common/main/resources/less/radiobox.less |  2 +-
 apps/common/main/resources/less/toolbar.less  |  2 +-
 .../main/resources/less/filemenu.less         | 20 -----
 .../main/resources/less/rightmenu.less        | 62 +-------------
 .../main/resources/less/leftmenu.less         | 17 ----
 .../main/resources/less/rightmenu.less        | 58 +------------
 .../main/resources/less/leftmenu.less         | 19 +----
 .../main/resources/less/rightmenu.less        | 58 +------------
 14 files changed, 127 insertions(+), 272 deletions(-)

diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index cf61a66be..170c54202 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -363,6 +363,10 @@
         width: 14px;
         height: 3px;
         background-color: red;
+
+        .pixel-ratio__1_5 & {
+            height: 4px;
+        }
     }
 }
 
@@ -547,17 +551,15 @@
 .btn-color {
     width: 45px;
     height: 22px;
-    padding: 1px 11px 1px 1px;
-    //border:1px solid @input-border;
-    .adaptive-solid-border(1px, @input-border);
+    padding: @scaled-one-px-value 11px @scaled-one-px-value @scaled-one-px-value;
+    border:@scaled-one-px-value solid @input-border;
     .border-radius(@border-radius-small);
 
     span:nth-child(1) {
         float: left;
         width: 100%;
         height: 100%;
-        //border: 1px solid rgba(0, 0, 0, 0.2);
-        .adaptive-solid-border(1px, rgba(0, 0, 0, 0.2));
+        border: @scaled-one-px-value solid rgba(0, 0, 0, 0.2);
         background-color: transparent;
     }
 
@@ -640,8 +642,7 @@
     width: 75px;
     height: 22px;
     background: @input-bg;
-    //border: 1px solid @input-border;
-    .adaptive-solid-border(1px, @input-border);
+    border: @scaled-one-px-value solid @input-border;
     .border-radius(@border-radius-small);
 
     &.auto {
@@ -672,7 +673,7 @@
     width: 100%;
     height: 22px;
     background: @input-bg;
-    border: 1px solid @input-border;
+    border: @scaled-one-px-value solid @input-border;
     .border-radius(@border-radius-small);
 
     button {
@@ -706,7 +707,7 @@
     width: 75px;
     height: 22px;
     background: @input-bg;
-    border: 1px solid @input-border;
+    border: @scaled-one-px-value solid @input-border;
     .border-radius(@border-radius-small);
 
     &.dropdown-toggle {
@@ -739,7 +740,7 @@
     width: 45px;
     height: 22px;
     background: @input-bg;
-    border: 1px solid @input-border;
+    border: @scaled-one-px-value solid @input-border;
     .border-radius(@border-radius-small);
 
     .icon {
@@ -779,7 +780,7 @@
     margin:0;
     box-shadow: none;
     background-color: @input-bg;
-    border: 1px solid @input-border;
+    border: @scaled-one-px-value solid @input-border;
     .border-radius(@border-radius-small);
 
     &.template-table {
@@ -804,7 +805,7 @@
         margin-right: 3px;
         background-color: transparent;
         background-repeat: no-repeat;
-        border: 1px solid @input-border;
+        border: @scaled-one-px-value solid @input-border;
         position: relative;
     }
 
diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index 7ca9aa003..6d221ee24 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -13,8 +13,7 @@
             width: 14px;
             height: 14px;
             background: #fff;
-            //border: 1px solid @gray;
-            .adaptive-solid-border(1px, @gray);
+            border: @scaled-one-px-value solid @gray;
             border-radius: 2px;
             position: absolute;
             left: 0;
@@ -43,8 +42,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    //border: 1px solid @gray-deep;
-                    .adaptive-solid-border(1px, @gray-deep);
+                    border: @scaled-one-px-value solid @gray-deep;
                     background: @gray-soft;
                     width: 8px;
                     height: 8px;
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 8b3222037..bc6ed7133 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -14,7 +14,7 @@
         right: 0;
         bottom: 45px;
         height: 300px;
-        border-bottom: 1px solid @gray-dark;
+        border-bottom: @scaled-one-px-value solid @gray-dark;
 
         &.stretch {
             border-bottom: none;
@@ -35,7 +35,7 @@
             color: @black;
             font: 12px arial;
             line-height: normal;
-            border-bottom: 1px dotted @black;
+            border-bottom: @scaled-one-px-value dotted @black;
             padding-top: 12px;
             outline: none;
             height: 29px;
@@ -58,7 +58,7 @@
             width: 100%;
             resize: none;
             margin-bottom: 5px;
-            border: 1px solid @gray-dark;
+            border: @scaled-one-px-value solid @gray-dark;
             height: 100%;
             &:focus {
                 border-color: @gray-darker;
@@ -90,7 +90,7 @@
         height: 50px;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid @gray-dark;
+        border: @scaled-one-px-value solid @gray-dark;
         word-break: break-all;
         line-height: 15px;
         color: @gray-deep;
@@ -109,7 +109,7 @@
     }
 
     .separator-cmt {
-        border-bottom: 1px solid @gray-dark;
+        border-bottom: @scaled-one-px-value solid @gray-dark;
         margin: 20px 0px 0px 0px;
     }
 
@@ -133,7 +133,7 @@
     .color {
         width: 12px;
         height: 12px;
-        border: 1px solid @gray-dark;
+        border: @scaled-one-px-value solid @gray-dark;
         margin: 0 5px 3px 0;
         vertical-align: middle;
     }
@@ -170,7 +170,7 @@
         font-style: italic;
         margin-top: 10px;
         padding: 0px 5px 5px 5px;
-        border-left: 1px solid #939393;
+        border-left: @scaled-one-px-value solid #939393;
         word-break: break-all;
         white-space: pre-wrap;
         cursor: pointer;
@@ -204,7 +204,7 @@
         margin-top: 10px;
         white-space: pre-wrap;
         width: auto;
-        border-bottom: 1px dotted @black;
+        border-bottom: @scaled-one-px-value dotted @black;
         height: 16px;
         cursor: pointer;
     }
@@ -408,6 +408,6 @@
         -webkit-transform: rotate(45deg);
         -o-transform: rotate(45deg);
         transform: rotate(45deg);
-        border: solid 1px @gray-dark;
+        border: solid @scaled-one-px-value @gray-dark;
     }
 }
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 7cbfe9ce1..6177bfe9f 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -1,6 +1,6 @@
 label {
     &.link {
-        border-bottom: 1px dotted #aaa;
+        border-bottom: @scaled-one-px-value dotted #aaa;
         cursor: pointer;
 
         &.disabled {
@@ -108,4 +108,86 @@ label {
         color: @gray-deep;
         white-space: nowrap;
     }
+}
+
+#file-menu-panel {
+    > div {
+        height: 100%;
+    }
+
+    .panel-menu {
+        width: 260px;
+        float: left;
+        border-right: @scaled-one-px-value solid @gray-dark;
+        background-color: @gray-light;
+    }
+
+    .flex-settings {
+        &.bordered {
+            border-bottom: @scaled-one-px-value solid @gray;
+        }
+        overflow: hidden;
+        position: relative;
+    }
+
+}
+
+.settings-panel {
+    display: none;
+    overflow: visible;
+    margin-top: 7px;
+
+    & > table {
+        width: 100%;
+    }
+
+    &.active {
+        display: block;
+    }
+
+    .padding-small {
+        padding-bottom: 8px;
+    }
+
+    .padding-large {
+        padding-bottom: 16px;
+    }
+
+    .finish-cell {
+        height: 15px;
+    }
+
+    label {
+        .font-size-normal();
+        font-weight: normal;
+
+        &.input-label{
+            margin-bottom: 0;
+            vertical-align: middle;
+        }
+
+        &.header {
+            font-weight: bold;
+        }
+    }
+
+    .separator { width: 100%;}
+
+    .settings-hidden {
+        display: none;
+    }
+
+    textarea {
+        .user-select(text);
+        width: 100%;
+        resize: none;
+        margin-bottom: 5px;
+        border: @scaled-one-px-value solid @gray-dark;
+        height: 100%;
+
+        &.disabled {
+            opacity: 0.65;
+            cursor: default !important;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index 881b62daa..e318dc335 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -22,8 +22,7 @@
         margin: 4px;
         cursor: pointer;
 
-        .get-scaled-value(1px);
-        .box-shadow(0 0 0 @scaledvalue @gray);
+        .box-shadow(0 0 0 @scaled-one-px-value @gray);
 
         &:hover,
         &.selected {
@@ -60,8 +59,7 @@
                     opacity: 0.5;
                 }
 
-                .get-scaled-value(1px);
-                .box-shadow(0 0 0 @scaledvalue @gray);
+                .box-shadow(0 0 0 @scaled-one-px-value @gray);
 
                 &:hover:not(.disabled),
                 &.selected:not(.disabled) {
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index 898e04ac7..76910a0cb 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -18,13 +18,13 @@
             -webkit-transform: rotate(45deg);
             -o-transform: rotate(45deg);
             transform: rotate(45deg);
-            border-top: solid 1px @gray-darker;
-            border-left: solid 1px @gray-darker;
+            border-top: solid @scaled-one-px-value @gray-darker;
+            border-left: solid @scaled-one-px-value @gray-darker;
             border-radius: 0 3px;
             box-sizing: content-box;
             .thumb-top-inner {
-                border-top: solid 1px #fff;
-                border-left: solid 1px #fff;
+                border-top: solid @scaled-one-px-value #fff;
+                border-left: solid @scaled-one-px-value #fff;
                 height: 100%;
             }
         }
@@ -36,12 +36,12 @@
             width: 10px;
             height: 9px;
             background-color: #ffffff;
-            border: solid 1px @gray-darker;
+            border: solid @scaled-one-px-value @gray-darker;
             border-top: none;
             border-radius: 2px;
             box-sizing: content-box;
             .thumb-bottom-inner {
-                border: solid 1px #fff;
+                border: solid @scaled-one-px-value #fff;
                 border-top: none;
                 height: 100%;
             }
@@ -49,11 +49,11 @@
 
         &.active {
             .thumb-top {
-                border-top: solid 1px #000;
-                border-left: solid 1px #000;
+                border-top: solid @scaled-one-px-value #000;
+                border-left: solid @scaled-one-px-value #000;
             }
             .thumb-bottom {
-                border: solid 1px #000;
+                border: solid @scaled-one-px-value #000;
                 border-top: none;
             }
         }
@@ -80,8 +80,8 @@
 //        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 
         background-position: 0 0;
-        outline: 1px solid rgba(162, 162, 162, 1);
-        border: 1px solid #FFFFFF;
+        outline: @scaled-one-px-value solid rgba(162, 162, 162, 1);
+        border: @scaled-one-px-value solid #FFFFFF;
         cursor: copy;
     }
 }
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index c95c3657f..401848642 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -19,7 +19,7 @@
             height: 14px;
 
             background: #fff;
-            border: 1px solid @gray;
+            border: @scaled-one-px-value solid @gray;
             border-radius: 50%;
         }
 
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 27b6ea68a..df2c88fc4 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -469,7 +469,7 @@
         background-color: #fff;
 
         &:not(:active) {
-            box-shadow: inset 0 0 0 1px #cbcbcb;
+            box-shadow: inset 0 0 0 @scaled-one-px-value #cbcbcb;
         }
 
         &, .icon {
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 72c5a5c5d..797051931 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -1,16 +1,6 @@
 
 #file-menu-panel {
-  > div {
-    height: 100%;
-  }
-
   .panel-menu {
-    width: 260px;
-    float: left;
-    //border-right: 1px solid @gray-dark;
-      .adaptive-solid-border(1px, @gray-dark, right);
-    background-color: @gray-light;
-
     li {
       list-style: none;
       position: relative;
@@ -121,16 +111,6 @@
   }
 }
 
-.flex-settings {
-  #file-menu-panel & {
-    &.bordered {
-      border-bottom: 1px solid @gray;
-    }
-    overflow: hidden;
-    position: relative;
-  }
-}
-
 #panel-settings,
 #panel-info {
   #file-menu-panel & {
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 9a0bc8f1e..bf78318c3 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -1,69 +1,11 @@
 
 .settings-panel {
-    display: none;
-    overflow: visible;
-    margin-top: 7px;
-
-    & > table {
-        width: 100%;
-    }
-
-    &.active {
-        display: block;
-    }
-
-    .padding-extra-small {
-        padding-bottom: 2px;
-    }
-
-    .padding-small {
-        padding-bottom: 8px;
-    }
-
     .padding-medium {
         padding-bottom: 12px;
     }
 
-    .padding-large {
-        padding-bottom: 16px;
-    }
-
-    .finish-cell {
-        height: 15px;
-    }
-
-    label {
-        .font-size-normal();
-        font-weight: normal;
-
-        &.input-label{
-            margin-bottom: 0;
-            vertical-align: middle;
-        }
-
-        &.header {
-            font-weight: bold;
-        }
-    }
-
-    .separator { width: 100%;}
-
-    .settings-hidden {
-        display: none;
-    }
-
-    textarea {
-       .user-select(text);
-        width: 100%;
-        resize: none;
-        margin-bottom: 5px;
-        border: 1px solid @gray-dark;
-        height: 100%;
-
-        &.disabled {
-            opacity: 0.65;
-            cursor: default !important;
-        }
+    .padding-extra-small {
+        padding-bottom: 2px;
     }
 }
 .right-panel .settings-panel {
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 906dfdadb..ed1b9fd88 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -47,16 +47,7 @@
 }
 
 #file-menu-panel {
-    > div {
-        height: 100%;
-    }
-
     .panel-menu {
-        width: 260px;
-        float: left;
-        border-right: 1px solid @gray-dark;
-        background-color: @gray-light;
-
         li {
             list-style: none;
             position: relative;
@@ -152,14 +143,6 @@
             }
         }
 
-        .flex-settings {
-            &.bordered {
-                border-bottom: 1px solid @gray;
-            }
-            overflow: hidden;
-            position: relative;
-        }
-
         #panel-settings,
         #panel-info {
             padding: 0;
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 5cf319ddc..e15bd154c 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -1,63 +1,7 @@
 
 .settings-panel {
-    display: none;
-    overflow: visible;
-    margin-top: 7px;
-
-    & > table {
-        width: 100%;
-    }
-
-    &.active {
-        display: block;
-    }
-
-    .padding-small {
-        padding-bottom: 8px;
-    }
-
-    .padding-large {
-        padding-bottom: 16px;
-    }
-
-    .finish-cell {
-        height: 15px;
-    }
-
-    label {
-        .font-size-normal();
-        font-weight: normal;
-
-        &.input-label{
-            margin-bottom: 0;
-            vertical-align: middle;
-        }
-
-        &.header {
-            font-weight: bold;
-        }
-    }
-
-    .separator { width: 100%;}
-
-    .settings-hidden {
-        display: none;
-    }
-
-    textarea {
-        .user-select(text);
-        width: 100%;
-        resize: none;
-        margin-bottom: 5px;
-        border: 1px solid @gray-dark;
-        height: 100%;
-
-        &.disabled {
-            opacity: 0.65;
-            cursor: default !important;
-        }
-    }
 }
+
 .right-panel .settings-panel {
     label.input-label{
         vertical-align: baseline;
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index ff135a701..78a1ab3b9 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -47,16 +47,7 @@
 }
 
 #file-menu-panel {
-    > div {
-        height: 100%;
-    }
-
     .panel-menu {
-        width: 260px;
-        float: left;
-        border-right: 1px solid @gray-dark;
-        background-color: @gray-light;
-
         li {
             list-style: none;
             position: relative;
@@ -142,14 +133,6 @@
             }
         }
 
-        .flex-settings {
-            &.bordered {
-                border-bottom: 1px solid @gray;
-            }
-            overflow: hidden;
-            position: relative;
-        }
-
         #panel-settings-general,
         #panel-settings-print {
             & > div {
@@ -172,7 +155,7 @@
 
             #id-settings-menu {
                 .dataview {
-                    border-right: 1px solid @gray-dark;
+                    border-right: @scaled-one-px-value solid @gray-dark;
 
                     & > div:not([class^=ps-scrollbar]) {
                         display: block;
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 5f8dd67bb..87bc54fc7 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -1,63 +1,7 @@
 
 .settings-panel {
-    display: none;
-    overflow: visible;
-    margin-top: 7px;
-
-    & > table {
-        width: 100%;
-    }
-
-    &.active {
-        display: block;
-    }
-
-    .padding-small {
-        padding-bottom: 8px;
-    }
-
-    .padding-large {
-        padding-bottom: 16px;
-    }
-
-    .finish-cell {
-        height: 15px;
-    }
-
-    label {
-        .font-size-normal();
-        font-weight: normal;
-
-        &.input-label{
-            margin-bottom: 0;
-            vertical-align: middle;
-        }
-
-        &.header {
-            font-weight: bold;
-        }
-    }
-
-    .separator { width: 100%;}
-
-    .settings-hidden {
-        display: none;
-    }
-
-    textarea {
-        .user-select(text);
-        width: 100%;
-        resize: none;
-        margin-bottom: 5px;
-        border: 1px solid @gray-dark;
-        height: 100%;
-
-        &.disabled {
-            opacity: 0.65;
-            cursor: default !important;
-        }
-    }
 }
+
 .right-panel .settings-panel {
     label.input-label{
         vertical-align: baseline;