[scaling] repaired style for some components

apps/common/main/lib/util/utils.js

@@ -119,6 +119,14 @@ Common.Utils = _.extend(new(function() {
         isMobile = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera),
         me = this,
         checkSize = function() {
+            var str_mq_150 = "screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), " +
+                                "screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx)";
+            if ( window.matchMedia(str_mq_150).matches ) {
+                $(document.body).addClass('pixel-ratio__1_5');
+            } else {
+                $(document.body).removeClass('pixel-ratio__1_5');
+            }
+
             me.zoom = 1;
             if (false && isChrome && !isOpera && !isMobile && document && document.firstElementChild && document.body) {
                 // делаем простую проверку

apps/common/main/resources/less/asc-mixins.less

@@ -85,6 +85,12 @@
 */
 :root {
     --bgX: 0px;
+
+    --pixel-ratio-factor: 1;
+
+    .pixel-ratio__1_5 {
+        --pixel-ratio-factor: 1.5;
+    }
 }
 
 .button-normal-icon(@icon-class, @index, @icon-size) {
@@ -330,3 +336,7 @@
         }
     }
 }
+
+.get-scaled-value(@v) {
+    @scaledvalue: calc(@v / var(--pixel-ratio-factor));
+}

apps/common/main/resources/less/dataview.less

@@ -22,11 +22,13 @@
         margin: 4px;
         cursor: pointer;
 
-        .box-shadow(0 0 0 1px @gray);
+        .get-scaled-value(1px);
+        .box-shadow(0 0 0 @scaledvalue @gray);
 
         &:hover,
         &.selected {
-            .box-shadow(0 0 0 2px @primary);
+            .get-scaled-value(2px);
+            .box-shadow(0 0 0 @scaledvalue @primary);
         }
     }
 
@@ -58,11 +60,13 @@
                     opacity: 0.5;
                 }
 
-                .box-shadow(0 0 0 1px @gray);
+                .get-scaled-value(1px);
+                .box-shadow(0 0 0 @scaledvalue @gray);
 
                 &:hover:not(.disabled),
                 &.selected:not(.disabled) {
-                    .box-shadow(0 0 0 2px @primary);
+                    .get-scaled-value(2px);
+                    .box-shadow(0 0 0 @scaledvalue @primary);
                 }
             }
         }

apps/common/main/resources/less/dropdown-menu.less

@@ -109,4 +109,8 @@
             }
         }
     }
+
+    .divider {
+        height: calc(1px / @pixel-ratio-factor);
+    }
 }

apps/common/main/resources/less/toolbar.less

@@ -529,3 +529,8 @@
     }
 }
 
+.item-equation {
+    .get-scaled-value(1px);
+    border: @scaledvalue solid @gray;
+    .background-ximage-v2('toolbar/math.png', 1500px);
+}

apps/common/main/resources/less/variables.less

@@ -1,6 +1,7 @@
 //
 // Global values
 // --------------------------------------------------
+@pixel-ratio-factor: var(--pixel-ratio-factor);
 
 // Paths
 // -------------------------

apps/documenteditor/main/resources/less/toolbar.less

@@ -49,11 +49,13 @@
             width: 246px;
             height: @contents-menu-item-height;
 
-            .box-shadow(0 0 0 1px @gray);
+            .get-scaled-value(1px);
+            .box-shadow(0 0 0 @scaledvalue @gray);
 
             &:hover,
             &.selected {
-                .box-shadow(0 0 0 2px @primary);
+                .get-scaled-value(2px);
+                .box-shadow(0 0 0 @scaledvalue @primary);
             }
         }
 
@@ -61,7 +63,8 @@
             background-color: transparent;
 
             div {
-                .box-shadow(0 0 0 2px @primary);
+                .get-scaled-value(2px);
+                .box-shadow(0 0 0 @scaledvalue @primary);
             }
         }
     }
@@ -91,7 +94,9 @@
             width: 12px;
             height: 12px;
             margin-right: 2px;
-            border: 1px solid rgba(0, 0, 0, 0.2);
+
+            .get-scaled-value(1px);
+            border: @scaledvalue solid rgba(0, 0, 0, 0.2);
             vertical-align: middle;
         }
 
@@ -125,7 +130,8 @@
                 opacity: 0.5;
 
                 &:hover {
-                    .box-shadow(0 0 0 1px @gray);
+                    .get-scaled-value(1px);
+                    .box-shadow(0 0 0 @scaledvalue @gray);
                 }
             }
         }
@@ -175,22 +181,20 @@
 #control-settings-system-color > a.selected,
 #control-settings-system-color > a:hover {
     span {
-        outline: 1px solid #000;
+        .get-scaled-value(1px);
-        border: 1px solid #fff;
+        outline: @scaledvalue solid #000;
+        border: @scaledvalue solid #fff;
     }
 }
 
-.item-equation {
-    border: 1px solid @gray;
-    .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
-}
-
 .save-style-container {
     cursor: default;
     position: relative;
     padding: 14px 11px;
-    border-left: 1px solid @gray;
+
-    border-top: 1px solid @gray;
+    .get-scaled-value(1px);
+    border-left: @scaledvalue solid @gray;
+    border-top: @scaledvalue solid @gray;
 }
 
 .save-style-link {
@@ -239,5 +243,7 @@
     position: absolute;
     z-index: @zindex-dropdown - 20;
     background-color: @gray-light;
-    border: 1px solid @gray;
+
+    .get-scaled-value(1px);
+    border: @scaledvalue solid @gray;
 }

apps/presentationeditor/main/resources/less/toolbar.less

@@ -117,11 +117,6 @@
     text-overflow: ellipsis;
 }
 
-.item-equation {
-    border: 1px solid @gray;
-    .background-ximage-v2('toolbar/math.png', 1500px);
-}
-
 #plugins-panel {
     .separator:first-child {
         display: inline-block;

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -135,11 +135,6 @@
     }
 }
 
-.item-equation {
-    border: 1px solid @gray;
-    .background-ximage-v2('toolbar/math.png', 1500px);
-}
-
 #special-paste-container,
 #autocorrect-paste-container {
     position: absolute;