[FIX] web, web_editor, *: review chess-like bg for transparency preview

*: website

The style to achieve the chess-like bg result was duplicated at many
places. The 'web' app was also actually using an image from the
'web_editor' app (we can live with it in stable as web_editor always
comes with web in auto_install but this was still a mistake).

closes odoo/odoo#54154

Also: fix some layout issue in the colorpicker widget.
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 34 insertions, 19 deletions

diff --git a/addons/web/static/src/img/transparent.png b/addons/web/static/src/img/transparent.png
new file mode 100644
index 00000000000..4a1bec033e7
--- /dev/null
+++ b/addons/web/static/src/img/transparent.png
diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index c53b31198d4..ada82fe967b 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -33,6 +33,7 @@
         }
     }
     .o_opacity_slider {
+        @extend %o-preview-alpha-background;
         position: relative;
         margin-left: 5%;
         width: 4%;
@@ -46,13 +47,6 @@
             border: 1px solid white;
             box-shadow: 0px 0px 2px 1px gray('600');
         }
-
-        &::before {
-            content: "";
-            @include o-position-absolute(0, 0, 0, 0);
-            z-index: -1;
-            background-image: url('/web_editor/static/src/img/transparent.png');
-        }
     }
 
     .o_color_picker_inputs {
@@ -60,25 +54,23 @@
         font-size: 12px;
         display: flex;
 
-        .o_color_preview_parent {
+        .o_color_preview {
+            @extend %o-preview-alpha-background;
             height: 20px;
             width: 30px;
-            background-image: url('/web_editor/static/src/img/transparent.png');
-            .o_color_preview {
-                height: inherit;
-                display: block;
-            }
+        }
+        > * {
+            display: flex;
+            align-items: baseline;
         }
         .o_hex_div {
             width: 38%;
-            display: flex;
-            border: 1px solid;
             margin-right: 2%;
+            border: 1px solid;
         }
         .o_rgba_div {
             width: 60%;
             border: 1px solid;
-            display: flex;
         }
         input {
             width: 100%;
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 89c38290da3..a3b41471777 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -98,6 +98,31 @@
     @return if($luma > $threshold, $-dark, $-light);
 }
 
+// Extend placeholder which adds a chess-like background below the color and
+// image of an element to preview the transparency of that color and image.
+// This is done thanks to both ::before and ::after elements so they must both
+// be available.
+%o-preview-alpha-background {
+    position: relative;
+    z-index: 0;
+
+    &::before {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background-image: url('/web/static/src/img/transparent.png');
+        background-size: 10px auto;
+        border-radius: inherit;
+    }
+    &::after {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background: inherit; // Inherit all background properties
+        border-radius: inherit;
+    }
+}
+
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------
diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml
index 7fb81da8711..a3f45348990 100644
--- a/addons/web/static/src/xml/colorpicker.xml
+++ b/addons/web/static/src/xml/colorpicker.xml
@@ -13,9 +13,7 @@
             <div class="o_opacity_pointer" tabindex="-1"/>
         </div>
         <div class="o_color_picker_inputs">
-            <div t-if="widget.options.colorPreview" class="o_color_preview_parent">
-                <span class="rounded-0 o_color_preview"/>
-            </div>
+            <div t-if="widget.options.colorPreview" class="o_color_preview"/>
             <div class="o_hex_div"><input type="text" class="o_hex_input" data-color-method="hex" size="1"/>hex</div>
             <div class="o_rgba_div">
                 <input type="text" class="o_red_input" data-color-method="rgb" size="1"/>