[FIX] website, *: fix some components in case of contrasted boxed layout

*: website_slides In some cases, components had dark text over dark background (or light text over light background) by mistake. Example: - Enter edit mode. - In the theme tab, choose "boxed" as page layout. - A color picker appears below to control the color behind the box. - Set it to a dark color (if your box main color is light) - Go to a course page (install website_slides) - Check the mobile version => The bootstrap tab and its section uses the dark color you set up as body color instead of the expected boxed layout color. Another example: - Do the same thing (set up a dark color behind a boxed layout). - Go to a shop / product page. => The inputs are dark with dark text. This is because of bootstrap which uses `$body-bg` as default value for other variables, such as `$nav-tabs-link-active-bg` in the first case described above. It also uses the variable in the creation of CSS rules not controlled by explicit variables. In 16.0, bootstrap was updated to 5.1.3 with [1] and this actually increased the problem: input backgrounds now default to `$body-bg`, amongst other things. Since [2], `$body-bg` is also used as the default color for range thumbs. In previous versions, this fix focused on fixing a critical component: nav-tabs, for which the fix was straightforward. Starting from 16.0, this commit will fix everything at the small risk of changing the `$body-bg` variable meaning in the case of boxed layouts. Before this commit, its meaning was "the color used for the background behind the boxed layout (the <body> background color)", so equal to the Odoo value `o-color('body')`. After this commit, its meaning will be "the color used for the background of the box itself", so equal to `o-color('o-cc1-bg')`. The `<body>` background color will be forced by using `o-color('body')` as the value for the related *CSS* variable defined by bootstrap. This allows to have a correct CSS generation for all components in case of boxed layouts: indeed, the components mix their own color with `$body-bg` (or use it as it is) relying on the fact this is the color which appears behind them... which was not right in case of boxed layouts. This commit actually fixes another bug that was found during adaptation. It is 2-fold, and unfortunately, it does not make sense to fix one part without the other as it would increase the problem without the other part. The website_slides pages customize their default background color to not be the one chosen by the user, but a mix of it with some lightgray. Odoo default for the body being white, this makes it a lightgray for website_slides pages. This is totally ok... but only in "full" layout. In boxed layout, we have the 2-fold problem: A. The mixed color is not applied to the boxed layout but on the background behind the box. So if you have a white box above a black background, in website_slides pages you won't have the black background you expected to keep but a lighter version of it and the website_slides box will not use the lightgray but stay white (creating other inconsistencies as the lightgray would also be used by other components like tabs, for that app only). B. The mixed color is actually not mixing the right colors: it mixes the hardcoded lightgray with the color of the background behind the box, while it was intended to be the one of the content (the one of the box), like in "full" layout. The changes explained above about `$body-bg` naturally fixes (B). Not fixing (A) at the same time would result in a big change for the color which is behind the box. This commit fixes it at the same time by now applying the color to the right element. In previous version, this could be fixed as well but would require a different fix (not relying on `$body-bg`). So it makes sense to merge this first and backport+adapt. [1]: odoo@971e5a9 [2]: odoo@46e5387 opw-3151962 closes odoo#112136 X-original-commit: 03f238a Signed-off-by: Romain Derie (rde) <rde@odoo.com> Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Niboo · Feb 8, 2023 · 14c985a · 14c985a
1 parent 0290059
commit 14c985a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -41,17 +41,26 @@ $spacer: 1rem !default; // Need to predefine as used below
 //
 // Settings for the `<body>` element.
 
-$body-bg: if(o-website-value('layout') != 'full', o-color('body'), o-color('o-cc1-bg')) !default;
-$body-color: o-color('o-cc1-text') or color-contrast(o-color('o-cc1-bg')) !default;
+// Bootstrap uses `$body-bg` as default value for multiple variables but also in
+// the creation of CSS rules (not controlled by variables). In case of Odoo
+// boxed layout, `$body-bg` should thus be used to control the box background
+// color so that components displayed inside are consistent (as they use the
+// variable to compute some of their colors too). The background color behind
+// the box will be forced by an Odoo CSS rule instead of relying on Bootstrap
+// CSS rule (the <body> background color CSS rule) which uses `$body-bg`.
+// In future bootstrap version (> 5.1.3), this should probably be reviewed.
+// grep: BOXED_BODY_BG_ODOO
+$body-bg: o-color('o-cc1-bg') !default;
+$body-color: o-color('o-cc1-text') or color-contrast($body-bg) !default;
 
 // Links
 //
 // Style anchor elements.
 
 $-link-color: o-color('o-cc1-link');
 $-link-color: if($-link-color, $-link-color, o-color('primary'));
-$link-color: auto-contrast($-link-color, o-color('o-cc1-bg'), 'o-cc1-link') !default;
-$link-hover-color: auto-contrast(darken($link-color, 15%), o-color('o-cc1-bg'), 'o-cc1-link') !default;
+$link-color: auto-contrast($-link-color, $body-bg, 'o-cc1-link') !default;
+$link-hover-color: auto-contrast(darken($link-color, 15%), $body-bg, 'o-cc1-link') !default;
 $link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default;
 $link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default;
 

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
@@ -18,6 +18,15 @@ $-seen-urls: ();
 }
 
 :root {
+    // The color behind the boxed layout is forced by Odoo. The box background
+    // color uses the `$body-bg` variable.
+    // grep: BOXED_BODY_BG_ODOO
+    @if o-website-value('layout') != 'full' {
+        $-boxed-layout-body-bg: o-color('body');
+        --#{$variable-prefix}body-bg-rgb: #{to-rgb($-boxed-layout-body-bg)};
+        --#{$variable-prefix}body-bg: #{$-boxed-layout-body-bg};
+    }
+
     // The theme customize modal JS will need to know the value of some scss
     // variables used to render the user website, and those may have been
     // customized by themes, the user or anything else (so there is no file to
@@ -52,8 +61,6 @@ $-seen-urls: ();
     }
 
     // 5) Use final value used by the theme
-    @include print-variable('body', $body-bg);
-
     @include print-variable('logo-height', $o-theme-navbar-logo-height);
     @include print-variable('fixed-logo-height', $o-theme-navbar-fixed-logo-height);
 
@@ -121,7 +128,10 @@ $-seen-urls: ();
 
     @if o-website-value('layout') != 'full' {
         > main {
-            background-color: o-color('o-cc1-bg');
+            // The color behind the boxed layout is forced by Odoo. The box
+            // background color uses the `$body-bg` variable.
+            // grep: BOXED_BODY_BG_ODOO
+            background-color: $body-bg;
         }
 
         @include media-breakpoint-up(sm) {

diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
@@ -109,7 +109,13 @@ $line-height-truncate: 1.25em;
 }
 
 .o_wslides_body {
-    background-color: $o-wslides-color-bg;
+    > #wrapwrap > main {
+        // Change default "body" background in case of website_slides pages.
+        // Note: this only affects the "main" element as we don't want (semi-)
+        // transparent header/footer to be impacted and we also only want the
+        // "box" of boxed layouts to be impacted (not the color behind the box).
+        background-color: $o-wslides-color-bg;
+    }
 
     .o_wslides_home_nav {
         top: -40px;