[FIX] website, web_editor: block background video/image border layer fix

[dabo-odoo]

These commits fix two issues:

• If a block that has an image selected as background is given a
  border, its background image will fit awkwardly in the surrounding
  border, and similarly if the background image is positioned all the
  way to any edge, it does not cover all the block.
• If a video is selected as background for a block, the video does not
  always fill the block.

Steps to reproduce:

Bug 1

• Add a masonry block/big boxes block
• Add a background image to an element of the masonry/big boxes
• Add a big border
• Make the border translucent if it isn't already to better see the bug
  => The background image overflows on the border randomly
• Change the background position by shifting the image all the way to
  the left
  => The image does not cover all the border-box

Bug 2

• Add a masonry block/big boxes block
• Add a video background
  => The video does not always fill the box, especially when the window
  gets resized

After the changes the image/video background completely covers its
block, even when resized or when a border is applied.

task-4174638

[robodoo]

[qsm-odoo]

Multiples bugs: can't there be multiple commits please? 🙏

[qsm-odoo]

Are all of those CSS rules duplicated? 🤔 Can't they not be? 🤔

[dabo-odoo]

Removed the duplicate

[qsm-odoo]

I don't think you did: I think you need a third commit (to be the first one of your PR), to remove the duplication. The CSS rules for o_bg_img_opt_repeat, o_bg_img_center, ... seems to be duplicated for no reason: they should be in web_editor only.

Then you add a new one in this commit, which should also be defined in web_editor, not website since your JS code is using it in web_editor, not website 👍

[qsm-odoo]

• Again: duplicated CSS rules -> no
• I don't want this class, the border class of Bootstrap should be enough: why is it not? 🙏

[dabo-odoo]

The border class of bootstrap takes $border-color which is transparent, so I thought to override it with a custom class that takes currentColor as parameter instead: this also has the benefit of setting a default border color that changes according to the chosen theme instead of the default gray-300.
Will remove the duplicates

[qsm-odoo]

The border class of bootstrap takes $border-color which is transparent

I don't think it ever was no (you are saying yourself: "instead of the default gray-300") 🤔 Plus I just retested in 16.0 and 18.0, I don't have that transparent bug anymore somehow 🤷 Could you double check?

so I thought to override it with a custom class that takes currentColor as parameter instead

It's already the default behavior of the border class in at least 18.0 😉 And since in 16.0 it does not seem buggy anymore (or did I test it wrong?), I don't think we need to change the behavior of the option, could you double check?

[dabo-odoo]

I checked again and the default transparent bug is present in 17 and 18 but not in 16

[dabo-odoo]

@qsm-odoo Reorganized and split the PR into two commits, one for the background image bug, one for the background video bug

[qsm-odoo]

Ping me once latest adaptations done :)

[qsm-odoo]

I don't think you did: I think you need a third commit (to be the first one of your PR), to remove the duplication. The CSS rules for o_bg_img_opt_repeat, o_bg_img_center, ... seems to be duplicated for no reason: they should be in web_editor only.

Then you add a new one in this commit, which should also be defined in web_editor, not website since your JS code is using it in web_editor, not website 👍

[dabo-odoo]

@qsm-odoo Added a third commit removing the duplicate classes and split the comment to respect the 80 characters limit

[qsm-odoo]

@dabo-odoo In fact, my bad, we don't remove dead code (duplicated CSS here) in stable. So I removed the first commit and I am opening a new PR with it for master 👍

Let's move forward with the rest 💪

@robodoo rebase-ff r+

[robodoo]

Merge method set to rebase and fast-forward.