1 files changed, 26 insertions, 60 deletions

diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index a2be514e6d1..ae618504a0c 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -1,82 +1,48 @@
 // COLOR PICKER
 .o_colorpicker_widget {
     .o_color_pick_area {
-        position: relative;
-        width: 79%;
         height: 125px;
         background-image: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
                           linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
         cursor: crosshair;
-
-        .o_picker_pointer {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            border: 1px solid white;
-            box-shadow: 0px 0px 2px 1px gray('400');
-        }
     }
     .o_color_slider {
-        position: relative;
-        margin-left: 2.5%;
-        width: 4%;
-        height: 125px;
         background: linear-gradient(#F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-        cursor: pointer;
-
-        .o_slider_pointer {
-            @include o-position-absolute($left: -100%);
-            width: 300%;
-            height: 6px;
-            border: 1px solid white;
-            box-shadow: 0px 0px 2px 1px gray('600');
-        }
     }
-    .o_opacity_slider {
+    .o_opacity_slider, .o_color_preview {
         @extend %o-preview-alpha-background;
-        position: relative;
-        margin-left: 5%;
+    }
+    .o_color_slider, .o_opacity_slider {
         width: 4%;
-        height: 125px;
+        margin-right: 2%;
         cursor: pointer;
-
-        .o_opacity_pointer {
-            @include o-position-absolute($left: -100%);
-            width: 300%;
-            height: 6px;
-            border: 1px solid white;
-            box-shadow: 0px 0px 2px 1px gray('600');
-        }
     }
-
+    .o_slider_pointer, .o_opacity_pointer {
+        @include o-position-absolute($left: -50%);
+        width: 200%;
+        height: 8px;
+        margin-top: -2px;
+    }
+    .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview {
+        box-shadow: inset 0 0 0 1px rgba(white, 0.9);
+    }
+    .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div  {
+        border: 1px solid black;
+    }
     .o_color_picker_inputs {
-        padding-top: 3px;
-        font-size: 12px;
-        display: flex;
+        font-size: 10px;
 
-        .o_color_preview {
-            @extend %o-preview-alpha-background;
-            height: 20px;
-            width: 30px;
-        }
-        > * {
-            display: flex;
-        }
-        .o_hex_div {
-            width: 38%;
-            margin-right: 2%;
-            border: 1px solid;
-        }
-        .o_rgba_div {
-            width: 60%;
-            border: 1px solid;
-        }
         input {
-            width: 100%;
-            border: none;
+            font-family: monospace !important; // FIXME: the monospace font used in the editor has not consistent ch units on Firefox
             height: 18px;
-            background-color: inherit;
-            color: inherit;
+            font-size: 11px;
+        }
+        .o_hex_div input {
+            width: 7ch;
+        }
+        .o_rgba_div input {
+            margin-right: 3px;
+            width: 3ch;
         }
     }
 }