odoo/odoo#111780

Created by Website, Quentin Smetz (qsm)

label

odoo-dev:16.0-opw-3166634-body-bg-bs5-qsm

head

e8cd294103c2a8ed49303d9eaa9bf2a42c2801c5

target

14.0

merged

1 year ago by Website, Romain Derie (rde)

forward-ports

• odoo/odoo#112254 targeting master
• odoo/odoo#112250 targeting saas-16.1
• odoo/odoo#112136 targeting 16.0
• odoo/odoo#112131 targeting saas-15.2
• odoo/odoo#112121 targeting 15.0

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

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 (this can also
be seen with standard "tabs" snippets, although their body is not
buggy in that case).

This is because of bootstrap which uses `$body-bg` as default value for
other variables, such as `$nav-tabs-link-active-bg` in the 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. Those are for example visible on the shop main
page with the price filter enabled. With a white boxed layout and dark
background, those were broken as well.

This commit focused on fixing the only critical component: nav-tabs, for
which the fix in straightforward. CSS rules that depends on `$body-bg`
in bootstrap are less easy to fix (without duplicating their rule), are
mainly less important ones and would actually not really be possible to
fix in a fully stable way. Those will be fixed only starting from 16.0
with an entirely different fix.

[1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968
[2]: https://github.com/odoo/odoo/commit/46e53879749be7ba3d30338d0f25c0a68a88eb3c

| Before | After |
|-----------|---------|
|  |  |

### Backup (see commit https://github.com/odoo/odoo/commit/cba89de662758b6dd3140e9ad27de90229430674) of original fix that was made for 16.0 (the goal will be the same as explained here but with a different implementation)

[FIX] website, web: restore some bg color in case of dark boxed layout

In some cases, components (like shop inputs) had dark text over dark
background (or light text over light background) by mistake.

Steps to reproduce:
- Enter edit mode (on a product page for example).
- In the theme tab, choose "boxed" as page layout.
- A color picker appears below to control the color behind the boxed
body.
- Set it to a dark color => that dark color is also used for input
background (broken product page).

This is because of the bootstrap 5.1.3 update made at [1]. The library
now uses `$body-bg` as default value of many other values. In future
versions of bootstrap (5.3 for example), this seems already changed. But
for now, this commit just sets up another explicit value for those
problematic values which follow the body color.

Since [2], `$body-bg` is also used as the default color for range
thumbs. Those are for example visible on the shop main page with the
price filter enabled. With a white boxed layout and dark background,
those were broken as well.

This also includes other components such as nav-tabs and image
thumbnails (e.g. profile page of website_slides**, in mobile view).
**: Note that this part is also broken before 16.0. A partial backport
will be made.

This commit fixes the issue by creating a new variable `$o-main-bg`
which holds the background color of the boxed layout (or the body-bg in
full layout) and use that value as default in bootstrap components.

[1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968
[2]: https://github.com/odoo/odoo/commit/46e53879749be7ba3d30338d0f25c0a68a88eb3c

opw-3151962

| Before | After |
|-----------|---------|
|  |  |