[IMP] website, *: enable the parallax option for all snippets

*: web_editor, website_blog

Unfortunately, this feature revealed a new batch of flaws in the
editor widgets system so some hacks were made to make it work. We will
always have the time to improve the pure technical side later.

This commit also separates the notion of color filter from the notion
of parallax. A color filter can now be applied independantly, when
there is either a background image or a background video. Applying a
color filter on top of a background video is actually a new feature.
Applying a color filter on top of a background image is actually now
achievable by two different ways: this new color filter layer or by
applying the color transformation on the image itself via the related
option. Depending on the user case, both could make sense at the same
time, but more importantly: having a CSS color filter is useful for
using those for default Odoo content (e.g. like the current contact us
page where we use a cover banner with an image with a black filter on
top of it: doing that without CSS color filter would mean to alter the
image directly which would not be ok when the user changes the image).
Also, sometimes you want the unfiltered image on a page and the exact
same one but filtered on another (for example: forum images).

Note: this commit also "fixes" an issue: the optimization feature for
images when parallax was enabled was not available before.

Part of https://github.com/odoo/odoo/pull/47313
task-46147

2 files changed, 31 insertions, 10 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index b2fb1ef821e..0cd22143290 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -708,3 +708,33 @@ blockquote {
     @include bg-variant(".bg-#{$-color-name}", $-color);
     @include text-emphasis-variant(".text-#{$-color-name}", $-color);
 }
+
+// Base snippet rules
+%o-we-background-layer-parent {
+    &, & > * {
+        // Allow background layers to be placed accordingly and snippet content
+        // to be displayed on top. Note: we cannot just position the layers
+        // with z-index: -1, otherwise it would go under the snippet own
+        // background. Adding a z-index: 0 on the snippet to create its own
+        // stacking context won't solve that either as, in that case, any BS
+        // component inside would be using that stacking context (e.g. a
+        // dropdown inside snippet 1 of the page would go under snippet 2
+        // when opened since the dropdown z-index would be confined into
+        // snippet 1's stacking context.
+        position: relative;
+    }
+}
+%o-we-background-layer {
+    @include o-position-absolute(0, 0, 0, 0);
+    display: block;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    pointer-events: none;
+}
+
+section {
+    @extend %o-we-background-layer-parent;
+}
+.o_we_bg_filter {
+    @extend %o-we-background-layer;
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index 172ab7fbe22..37ce7b974eb 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -33,16 +33,8 @@
 }
 
 // Background shapes
-[data-oe-shape-data] > * {
-    position: relative;
-}
-
 .o_we_shape {
-    @include o-position-absolute(0,0,0,0);
-    // position: absolute needs to be !important otherwise
-    // some classes (video background) override it with position: relative
-    position: absolute !important;
-    background-repeat: no-repeat;
+    @extend %o-we-background-layer;
 
     @each $module, $shapes in $o-bg-shapes {
         @each $shape, $style in $shapes {
@@ -68,7 +60,6 @@
         }
     }
 }
-
 .o_we_flip_x {
     transform: scaleX(-1);
 }