From f1506d95b93c817fbfdbaa21fc5b743344ed44f9 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Tue, 22 Nov 2022 14:42:43 +0300
Subject: [PATCH] bug 50355

---
 .../main/lib/component/HSBColorPicker.js      |  2 +-
 .../main/resources/less/hsb-colorpicker.less  | 41 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/lib/component/HSBColorPicker.js b/apps/common/main/lib/component/HSBColorPicker.js
index c832bf4cb..0cbd038f6 100644
--- a/apps/common/main/lib/component/HSBColorPicker.js
+++ b/apps/common/main/lib/component/HSBColorPicker.js
@@ -60,7 +60,7 @@ define([
                         '<% if (this.changeSaturation) { %>'+
                             '<div class="cnt-root">'+
                                 '<div class="cnt-sat img-colorpicker">'+
-                                    '<div class="cnt-sat-arrow img-colorpicker"></div>'+
+                                    '<div class="cnt-sat-arrow"></div>'+
                                 '</div>'+
                             '</div>'+
                         '<% } %>'+
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index 526418eec..21e5ccfba 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -81,7 +81,46 @@
         margin-left: -4px;
         margin-left: calc(-3px - @scaled-one-px-value);
         position: absolute;
-        background-position: -12px -196px;
+        @minus-px: calc(-1px / @pixel-ratio-factor);
+        &:before,&:after{
+            content: '';
+            position: absolute;
+            height: 0;
+
+            display: inline-block;
+            border-style: solid;
+        }
+        &:before{
+            width: 16px;
+            width: calc(15px + @scaled-one-px-value);
+            border-width: 6px 6px 6px 6px;
+            border-width: 6px calc(6px + @scaled-one-px-value) 6px calc(6px + @scaled-one-px-value);
+            border-color: transparent white transparent white;
+            box-shadow: -2px 0px 0px 0px white, 2px 0px 0px 0px white;
+            box-shadow: calc(-1px + @minus-px) 0px 0px 0px white, calc(3px - @scaled-one-px-value) 0px 0px 0px white;
+            border-radius: @scaled-one-px-value-ie;
+            border-radius: @scaled-one-px-value;
+            top: 0px;
+            left: 2px;
+            left: calc(1px + @scaled-one-px-value);
+
+        }
+        &:after{
+            width: 16px;
+            width: calc(15px + @scaled-one-px-value);
+            border-width: 5px 5px 5px 5px;
+            border-width: calc(4px + @scaled-one-px-value);
+            border-color: transparent black transparent black;
+            box-shadow: -1px 0px 0px 0px black, 1px 0px 0px 0px black;
+            box-shadow: @minus-px 0px 0px 0px black, @scaled-one-px-value 0px 0px 0px black;
+            position: absolute;
+            top: @scaled-one-px-value-ie;
+            left: @scaled-one-px-value-ie;
+            top:  calc(2px - @scaled-one-px-value);
+            left: calc(3px - @scaled-one-px-value);
+
+        }
+        //background-position: -12px -196px;
     }
 
     .empty-color {