From 7c533fce5ca97fdb5a53e9840a033bf32bbf009e Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 7 Mar 2023 13:57:59 +0000 Subject: [PATCH] [FIX] web: properly display table texts over any background Bootstrap tables can basically be customized with the `$table-bg` and `$table-color` variables. The problem is that, by default, BS4 defines them so that the background-color is null (so transparent: displaying the background-color of its ancestors) but the color is forced to the body color (by default: white). This is a problem as soon as the ancestors background colors are a color close to the body text color: the text becomes invisible. For instance, in website: - Set a body background color to black, the body text will automatically become white. - Add a table in a snippet: still ok, the text in the table is white over the black body (the table being transparent). - Then set the snippet background to white -> the table text will still be white... but now over a white background. This should be reviewed in master: it should be ok to set the variable $table-color to `null` thus letting the table be transparent and have the same text color as its parent. But in stable, changing a color variable to `null` could break customizations relying on the fact this is a set color. It would also not make sense if the user set up a `$table-bg` value going well with table text forced to the body color. Instead, here, in the very specific case we have a transparent table bg and table color equal to the body color, we temporarily unset the table color variable for the duration of the bootstrap table rules. Note: we cannot create a rule in an "Odoo file" to fix this as unsetting the color for the `.table` rule would also unset the color in the case of a `.table.bg-XXX` where we still want `.bg-XXX` to force the color. task-2728923 opw-3048306 opw-3180568 closes odoo/odoo#114631 X-original-commit: 02c2cfdff7c29252c7036e587b12d82442906e59 Signed-off-by: Quentin Smetz (qsm) --- .../src/scss/bootstrap_overridden_frontend.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss index d6ec5350397..86ef5ee374b 100644 --- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss +++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss @@ -44,6 +44,19 @@ $blockquote-small-color: inherit !default; // Link $link-decoration: none !default; +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +// Bootstrap tables can basically be customized with the `$table-bg` and +// `$table-color` variables. The problem is that, by default, BS5 defines them +// so that the background-color is null (so transparent: displaying the +// background-color of its ancestors) but the color is forced to the body color +// (by default: white). This is a problem as soon as the ancestors background +// colors are a color close to the body text color: the text becomes invisible. +// We disable this behavior by not forcing a text color for tables. +$table-color: inherit !default; + // Forms $input-transition: background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out !default;