Merge pull request #1330 from ONLYOFFICE/fix/info-tips

Fix/info tips

apps/common/forms/resources/less/common.less

@@ -233,19 +233,23 @@
     &.colored {
         padding: 0 16px;
         height: 28px;
+        background-color: @background-accent-button-ie;
         background-color: @background-accent-button;
         border: 1px solid transparent;
         border-radius: 3px;
+        color: @text-contrast-background-ie !important;
         color: @text-contrast-background !important;
         font-weight: 700;
 
         &:hover:not(.disabled),
         .over:not(.disabled) {
+            background-color: @highlight-accent-button-hover-ie !important;
             background-color: @highlight-accent-button-hover !important;
         }
 
         &:active:not(.disabled),
         &.active:not(.disabled) {
+            background-color: @highlight-accent-button-pressed-ie !important;
             background-color: @highlight-accent-button-pressed !important;
         }
     }

apps/common/main/lib/controller/Themes.js

@@ -51,6 +51,8 @@ define([
             "background-notification-badge",
             "background-scrim",
             "background-loader",
+            "background-accent-button",
+            "background-contrast-popover",
 
             "highlight-button-hover",
             "highlight-button-pressed",
@@ -60,6 +62,8 @@ define([
             "highlight-header-button-pressed",
             "highlight-toolbar-tab-underline",
             "highlight-text-select",
+            "highlight-accent-button-hover",
+            "highlight-accent-button-pressed",
 
             "border-toolbar",
             "border-divider",
@@ -70,6 +74,7 @@ define([
             "border-control-focus",
             "border-color-shading",
             "border-error",
+            "border-contrast-popover",
 
             "text-normal",
             "text-normal-pressed",

apps/common/main/resources/less/colors-table-classic.less

@@ -34,6 +34,7 @@
         --border-control-focus: #848484;
         --border-color-shading: fade(#000, 20%);
         --border-error: #d9534f;
+        --border-contrast-popover: #444444;
 
         --text-normal: #444;
         --text-normal-pressed: #fff;

apps/common/main/resources/less/colors-table-dark.less

@@ -35,6 +35,7 @@
         --border-control-focus: #ccc;
         --border-color-shading: fade(#fff, 10%);
         --border-error: #f62211;
+        --border-contrast-popover: #666;
 
         --text-normal: fade(#fff, 80%);
         --text-normal-pressed: fade(#fff, 80%);

apps/common/main/resources/less/colors-table-ie-fix.less

@@ -13,6 +13,8 @@
 @background-scrim-ie: fade(#000, 20%);
 @background-loader-ie: fade(#000, 65%);
 @background-alt-key-hint-ie: #FFD938;
+@background-accent-button-ie: #446995;
+@background-contrast-popover-ie: #444444;
 
 @highlight-button-hover-ie: #d8dadc;
 @highlight-button-pressed-ie: #7d858c;
@@ -22,6 +24,8 @@
 @highlight-header-button-pressed-ie: fade(#000, 20%);
 @highlight-toolbar-tab-underline-ie: #444;
 @highlight-text-select-ie: #3494fb;
+@highlight-accent-button-hover-ie: #375478;
+@highlight-accent-button-pressed-ie: #293F59;
 
 @border-toolbar-ie: #cbcbcb;
 @border-divider-ie: #cbcbcb;
@@ -32,6 +36,7 @@
 @border-control-focus-ie: #848484;
 @border-color-shading-ie: fade(#000, 20%);
 @border-error-ie: #d9534f;
+@border-contrast-popover-ie: #444444;
 
 @text-normal-ie: #444;
 @text-normal-pressed-ie: #fff;

apps/common/main/resources/less/colors-table.less

@@ -48,6 +48,7 @@
     --border-control-focus: #848484;
     --border-color-shading: fade(#000, 15%);
     --border-error: #f62211;
+    --border-contrast-popover: #444444;
 
     --text-normal: fade(#000, 80%);
     --text-normal-pressed: fade(#000, 80%);
@@ -185,6 +186,7 @@
 @border-control-focus: var(--border-control-focus);
 @border-color-shading: var(--border-color-shading);
 @border-error: var(--border-error);
+@border-contrast-popover: var(--border-contrast-popover);
 
 // Text
 // -------------------------

apps/common/main/resources/less/synchronize-tip.less

@@ -40,6 +40,8 @@
             background-color: @header-background-color;
             color: @text-toolbar-header-ie;
             color: @text-toolbar-header;
+            border-color: @header-background-color-ie;
+            border-color: @header-background-color;
 
             .close {
                 &:before, &:after {
@@ -49,9 +51,15 @@
             }
         }
 
-        .tip-arrow:after {
+        .tip-arrow:before {
             background-color: @header-background-color-ie;
             background-color: @header-background-color;
+            border-color: @header-background-color-ie !important;
+            border-color: @header-background-color !important;
+        }
+        .tip-arrow:after {
+            border-color: @header-background-color-ie !important;
+            border-color: @header-background-color !important;
         }
     }
 
@@ -59,11 +67,19 @@
         .asc-synchronizetip {
             background-color: @background-toolbar-ie;
             background-color: @background-toolbar;
+            border-color: @background-toolbar-ie;
+            border-color: @background-toolbar;
         }
 
-        .tip-arrow:after {
+        .tip-arrow:before {
             background-color: @background-toolbar-ie;
             background-color: @background-toolbar;
+            border-color: @background-toolbar-ie !important;
+            border-color: @background-toolbar !important;
+        }
+        .tip-arrow:after {
+            border-color: @background-toolbar-ie !important;
+            border-color: @background-toolbar !important;
         }
     }
 
@@ -75,17 +91,29 @@
         }
 
         .asc-synchronizetip {
+            background-color: @background-contrast-popover-ie;
             background-color: @background-contrast-popover;
+            color: @text-contrast-background-ie;
             color: @text-contrast-background;
+            border-color: @border-contrast-popover-ie;
+            border-color: @border-contrast-popover;
             .close {
                 &:before, &:after {
+                    background-color: @text-contrast-background-ie;
                     background-color: @text-contrast-background;
                 }
             }
         }
 
-        .tip-arrow:after {
+        .tip-arrow:before {
+            background-color: @background-contrast-popover-ie;
             background-color: @background-contrast-popover;
+            border-color: @border-contrast-popover-ie !important;
+            border-color: @border-contrast-popover !important;
+        }
+        .tip-arrow:after {
+            border-color: @border-contrast-popover-ie !important;
+            border-color: @border-contrast-popover !important;
         }
 
         .btn-div {
@@ -165,14 +193,14 @@
 
     &.right {
         .tip-arrow {
-            left: -13px;
+            left: -12px;
             top: 50%;
             margin-top: -7px;
             width: 16px;
             height: 15px;
             .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: 0;
                 left: 8px;
                 width: 16px;
@@ -186,10 +214,10 @@
             top: 50%;
             margin-top: -7px;
             width: 16px;
-            height: 15px;
+            height: 16px;
             .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: 0;
                 left: -8px;
                 width: 16px;
@@ -206,7 +234,7 @@
             height: 16px;
             .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: -6px;
                 left: 0;
                 width: 16px;
@@ -216,13 +244,13 @@
     &.bottom {
         .tip-arrow {
             left: 50%;
-            top: -12px;
+            top: -11px;
             margin-left: -7px;
-            width: 16px;
+            width: 15px;
             height: 15px;
             .box-shadow(0 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: 7px;
                 left: 0;
                 width: 16px;
@@ -238,11 +266,17 @@
             height: 15px;
             .box-shadow(0 -5px 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: -7px;
                 left: 7px;
                 width: 16px;
             }
+            &:after {
+                top: 0px;
+                left: 4px;
+                border-top: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-top: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
@@ -254,106 +288,148 @@
             height: 15px;
             .box-shadow(0 -5px 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: -7px;
                 left: -7px;
             }
+            &:after {
+                top: 0px;
+                left: -4px;
+                border-top: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-top: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
     &.top-left {
         .tip-arrow {
             right: 0;
-            bottom: -15px;
+            bottom: -14px;
             width: 15px;
             height: 15px;
             .box-shadow(5px 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: -8px;
                 left: 8px;
             }
+            &:after {
+                top: -6px;
+                left: 0px;
+                border-right: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-right: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
     &.top-right {
         .tip-arrow {
             left: 0;
-            bottom: -15px;
+            bottom: -14px;
             width: 15px;
             height: 15px;
             .box-shadow(-5px 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: -8px;
                 left: -8px;
                 .box-shadow(2px 2px 8px -1px rgba(0, 0, 0, 0.2));
             }
+            &:after {
+                top: -6px;
+                left: 0px;
+                border-left: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-left: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
     &.bottom-left {
         .tip-arrow {
             right: 0;
-            top: -15px;
+            top: -14px;
             width: 15px;
             height: 15px;
             .box-shadow(8px 5px 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: 8px;
                 left: 8px;
                 .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
             }
+            &:after {
+                top: 6px;
+                left: 0px;
+                border-right: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-right: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
     &.bottom-right {
         .tip-arrow {
             left: 0;
-            top: -15px;
+            top: -14px;
             width: 15px;
             height: 15px;
             .box-shadow(-8px 0 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: 8px;
                 left: -8px;
                 .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
             }
+            &:after {
+                top: 6px;
+                left: 0px;
+                border-left: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-left: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
     &.right-top {
         .tip-arrow {
-            left: -15px;
+            left: -14px;
             bottom: 0;
             width: 15px;
             height: 15px;
             .box-shadow(0 5px 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 top: 7px;
                 left: 7px;
                 width: 16px;
             }
+            &:after {
+                top: 0px;
+                left: 4px;
+                border-bottom: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-bottom: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 
     &.left-top {
         .tip-arrow {
-            right: -15px;
+            right: -14px;
             bottom: 0;
             width: 15px;
             height: 13px;
             .box-shadow(-5px 8px 8px -5px rgba(0, 0, 0, 0.2));
 
-            &:after {
+            &:before {
                 bottom: -7px;
                 left: -7px;
                 //width: 15px;
                 .box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
             }
+            &:after {
+                top: -2px;
+                left: -4px;
+                border-bottom: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+                border-bottom: @scaled-one-px-value solid @background-notification-popover;
+            }
         }
     }
 }
@@ -365,6 +441,9 @@
     background-color: @background-notification-popover;
     overflow: visible;
 
+    border: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+    border: @scaled-one-px-value solid @background-notification-popover;
+
     .bottom-right &,
     .right-bottom & {
         border-top-left-radius: 0;
@@ -389,7 +468,7 @@
     font-size: 11px;
 }
 
-.asc-synchronizetip .tip-arrow:after {
+.asc-synchronizetip .tip-arrow:before {
     content: '';
     position: absolute;
     top: 5px;
@@ -406,6 +485,15 @@
     transform: rotate(45deg);
 
     .box-shadow(0 4px 8px -1px rgba(0, 0, 0, 0.2));
+    border: @scaled-one-px-value-ie solid @background-notification-popover-ie;
+    border: @scaled-one-px-value solid @background-notification-popover;
+}
+.asc-synchronizetip .tip-arrow:after {
+    content: '';
+    position: absolute;
+    background-color: transparent;
+    width: 15px;
+    height: 15px;
 }
 
 .asc-synchronizetip .show-link {