From bae305fd24bd8d18b39b0b37da693777cbb7019e Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Tue, 12 Oct 2021 13:30:59 +0000 Subject: [PATCH] [FIX] web_editor: span gradient across text style changes Since [1] the gradient text image was reset within each font or span block (e.g. for applying bold style). The change was done because Chrome does not inherit the involved styles when a transform is used, which is the case in animated texts. After this commit the inherit style is only applied on animated texts. This lets the gradient span across style changes. Note that there is no solution yet for animated texts: they still have a restarted gradient. Steps to reproduce: - Drop a Title block in a website page. - Add a few words. - Select the whole title's text. - Make its text color a gradient. (Not the background color) - Select the second word (avoid picking the word in the middle to easily see the visual impact). - Make that word bold. => The gradient restarts within the bold word instead of continuing across the whole text - even though no text animation is used. [1]: https://github.com/odoo/odoo/commit/187acb938f70a2130d25fa76079221339c742f1e task-2666200 X-original-commit: 372eeebb47b93890d567185879981e817cdc1326 Part-of: odoo/odoo#109537 --- addons/web_editor/static/src/scss/web_editor.common.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 5e0afd1f9a0..8a2b4a924a5 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -892,10 +892,11 @@ section, .oe_img_bg, [data-oe-shape-data] { -webkit-text-fill-color: transparent; // FIXME (or wait for a fix in Chrome): the code below is needed to make - // animated text work with gradient background on Chrome. But the side - // effect is that text node wrapping by a span (e.g. bold, italic) no longer - // have the "gradient crossing all the text" on it but its own gradient. - * { + // animated text work with gradient background on Chrome. It is not based + // on ".text-gradient *" only to avoid a side effect that makes text nodes + // wrapped in a span (e.g. bold, italic) no longer have the "gradient + // crossing the whole text" on them but their own gradient. + .o_animated_text, .o_animated_text *, &.o_animated_text * { background-image: inherit; -webkit-background-clip: inherit; -webkit-text-fill-color: inherit;