[FIX] website, web_editor: prevent mixing navbar colors

This commit allows users to choose any color for their navbar when it is
over the content. With this commit, the user can choose the color he
wants for his navbar when it is scrolled and when it is not scrolled
without worrying about color mixing.

To simplify the explanation below, note that "Colors" option means the
Colors option of the header (just below the Template option) and the
"Background" option means the option below Header Position.

By following these steps:
- Drop some blocks in a the page (to be able to scroll)
- Set a light transparent red for the Colors option.
- Set the navbar position to "Over the content"
- With the Background option, set the background color to a dark color.

=> When you are at the top of the page, the color is the one of the
Background option. So far so good. Now when we scroll, the color of the
navbar is dark red. This is not what the user expects. The user should
be able to have any color he wants for the scrolled navbar. It's not the
case before this commit. He cannot have a dark transparent header on the
top of his page and a light transparent red when he scrolls. In this
configuration, the Colors option should set the color of the navbar once
the user has scrolled. The colors should not be mixed.

Technical explanation of the problem:
Background option applies the color on the header element and Colors
option sets the color on the nav element. The nav element is a child of
the header element.
So when the header has a color set by the Background option and nav has
a color set by the Colors option which has transparency, the color of
the header influences the color of the navbar when scrolling. This
commit allows to correct this.

This commit also fixes the same problem for the gradient option.

task-2904507

closes odoo/odoo#106281

Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -3495,7 +3495,8 @@ const SnippetOptionWidget = Widget.extend({
                 }
                 // If change had no effect then make it important.
                 // This condition requires extraClass to be set.
-                if (!weUtils.areCssValuesEqual(styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
+                if (!params.preventImportant && !weUtils.areCssValuesEqual(
+                        styles.getPropertyValue(cssProp), cssValue, cssProp, this.$target[0])) {
                     this.$target[0].style.setProperty(cssProp, cssValue, 'important');
                 }
                 if (params.extraClass) {

addons/website/static/src/scss/website.scss

@@ -952,6 +952,10 @@ header {
         border-radius: o-website-value('menu-border-radius') !important;
         box-shadow: o-website-value('menu-box-shadow') !important;
     }
+    // Prevent the color of the header to impact the color of the nav.
+    &.o_header_is_scrolled, &.o_transitioning.o_header_affixed {
+        background-color: transparent !important;
+    }
 }
 
 @if $-off-canvas-hamburger {
@@ -1288,7 +1292,9 @@ header {
 
         > .navbar {
             @include o-apply-colors(1); // Reset to default colored components
+            // Prevent the nav color/gradient to impact the header color.
             background-color: transparent !important;
+            background-image: none !important;
             border-color: transparent;
             color: inherit;
 

addons/website/views/snippets/snippets.xml

@@ -853,6 +853,7 @@
             class="o_we_sublevel_1"
             id="option_header_transparent_color"
             data-select-style="true"
+            data-prevent-important="true"
             data-css-property="background-color"
             data-color-prefix="bg-"
             data-excluded="theme, common, custom"/>