From d0889931b5e3e605de8f908f555b0cda56d7b302 Mon Sep 17 00:00:00 2001 From: Aitor Date: Thu, 7 Mar 2024 12:28:47 +0100 Subject: [PATCH] :bug: Fix color picker blurry bitmap --- frontend/src/app/main/ui/workspace/colorpicker.cljs | 6 +++--- frontend/src/app/main/ui/workspace/colorpicker.scss | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 59af137eb..115ba8f77 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -316,7 +316,7 @@ (if picking-color? [:div {:class (stl/css :picker-detail-wrapper)} [:div {:class (stl/css :center-circle)}] - [:canvas#picker-detail {:width 256 :height 140}]] + [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]] [:& ramp-selector {:color current-color :disable-opacity disable-opacity @@ -328,7 +328,7 @@ (if picking-color? [:div {:class (stl/css :picker-detail-wrapper)} [:div {:class (stl/css :center-circle)}] - [:canvas#picker-detail {:width 256 :height 140}]] + [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]] [:& harmony-selector {:color current-color :disable-opacity disable-opacity @@ -340,7 +340,7 @@ (if picking-color? [:div {:class (stl/css :picker-detail-wrapper)} [:div {:class (stl/css :center-circle)}] - [:canvas#picker-detail {:width 256 :height 140}]] + [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]] [:& hsva-selector {:color current-color :disable-opacity disable-opacity diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index 7865e349f..cc739678d 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -132,6 +132,11 @@ transform: translate(calc(-1 * $s-12), calc(-1 * $s-12)); } +.picker-detail { + image-rendering: crisp-edges; + image-rendering: pixelated; +} + .select { width: $s-116; }