[IMP] theme_*: use minimal format for highlighted text content

*: buzzy, clean, notes

A highlighted text has the following structure:

```
<span class="o_text_highlight o_text_highlight_[highlightId]"
    style="--text-highlight-width: ...; --text-highlight-color: ...;">
    <span class="o_text_highlight_item">
        text content (line 1) ...
        <svg.../>
    </span>
    [<br/>]
    <span class="o_text_highlight_item">
        text content (line 2) ...
        <svg.../>
    </span>
    ...
</span>
```

Which is saved in a minimal format that allows the JS code to rebuild
the SVGs when it's needed:

```
<span class="o_text_highlight o_text_highlight_[highlightId]"
    style="--text-highlight-width: ...; --text-highlight-color: ...;">
    text content ...
</span>
```

The goal of this commit is to use the simplified format for theme
customizations and adapt the code from the "Snippets Preview" and the
"New Page Templates Preview" to be able to build the highlights using
this format when provided in XML.

task-4215788

closes odoo/design-themes#956

Related: odoo/odoo#181884
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Mehdi Outagant (MOU)
2024-09-27 17:02:35 +02:00
committed by qsm-odoo
parent 971b323f58
commit ab8f6a8fce
11 changed files with 11 additions and 11 deletions
@@ -6,7 +6,7 @@
<attribute name="class" remove="o_cc o_cc2" separator=" "/>
</xpath>
<xpath expr="//h2" position="replace" mode="inner">
Top <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_4 o_text_highlight_fill" style="--text-highlight-width: 3px;"><span class="o_text_highlight_item">questions<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(0.6384375, 0.5737704918032787)" d="M96.414 17.157c1.34-2.173 2.462-4.075 3.649-5.944 2.117-3.335 5.528-4.302 9.372-2.694 3.962 1.651 4.89 3.575 3.908 8.073-.205.967-.388 1.934-.022 3.118 1.513-3.075 3.013-6.15 4.557-9.203 1.306-2.586 4.297-3.433 7.859-2.195 2.765.968 4.395 2.706 3.564 5.922-.529 2.054-1.005 4.118-.918 6.487.463-.859 1.015-1.685 1.371-2.586 1.447-3.673 3.002-7.324 4.2-11.083.896-2.792 2.192-3.955 5.323-3.564 4.772.598 7.049 3.412 5.84 7.986-.626 2.38-1.22 4.77-1.144 7.486.745-1.358 1.544-2.683 2.213-4.074a138.72 138.72 0 0 0 2.926-6.487c2.376-5.66 3.12-4.704 8.724-3.618 3.552.685 5.063 4.031 4.34 7.997-.616 3.423-1.166 6.856-1.749 10.29l.95.358c.993-2.151 2.062-4.27 2.958-6.454.594-1.456.886-3.042 1.403-4.53 2.43-6.911 2.43-6.813 9.566-5.542.928.163 2.656-.967 3.078-1.923.992-2.26 2.332-2.716 4.523-2.097 4.297 1.206 8.659 2.184 12.945 3.444 2.796.826 4.319 2.988 4.135 5.889-.173 2.684-.961 5.324-1.274 8.008-.734 6.4-1.361 12.799-2.019 19.21-.065.673.043 1.38-.097 2.031-.551 2.477-.41 5.465-3.476 6.421-2.311.717-6.489-2.194-7.644-5.03-.206-.5-.357-1.01-.918-2.63-1.22 3.27-2.073 5.629-2.991 7.965-2.095 5.345-3.66 5.954-8.874 3.705-.853-.37-2.354-.783-2.786-.359-3.163 3.075-5.971 1.217-8.853-.358-.378-.207-.81-.316-1.188-.457-5.851 7.65-12.502 4.596-15.061-3.944-1.543 3.042-2.883 5.726-4.265 8.399-3.357 6.53-7.783 6.975-12.47 1.25-.485-.587-.992-1.152-1.511-1.75-5.647 6.715-12.848 2.293-15.19-6.063-1.253 2.25-2.257 3.88-3.099 5.596-1.285 2.64-2.883 4.65-6.23 3.868-3.498-.826-6.532-4.085-6.65-7.225-.054-1.424 0-2.847-.475-4.433-1.393 2.879-2.71 5.802-4.19 8.637-3.228 6.204-6.067 6.824-11.67 2.912-.962-.673-2.57-.988-3.704-.728-3.681.837-6.272-.619-8.626-3.248-.691-.783-2.084-1.771-2.807-1.543-4.243 1.347-6.91-.641-9.166-3.836-.378-.543-.8-1.053-1.555-2.031-1.08 2.194-2.008 4.041-2.915 5.9-2.397 4.943-5.528 5.932-10.02 2.835-2.008-1.38-3.713-2.118-6.37-1.738-5.117.728-8.54-3.444-7.762-8.649.227-1.521.378-3.064-.086-4.9-.853 1.369-1.793 2.684-2.548 4.107-2.775 5.259-5.301 5.856-10.074 2.206-.971-.75-1.803-1.674-2.86-2.673-.67.271-1.598 1.043-2.257.858-2.71-.771-5.625-1.423-7.838-3.01-.842-.608-.378-3.683.108-5.465 2.008-7.41 4.232-14.755 6.413-22.11.572-1.945 1.166-3.901 1.943-5.77 1.89-4.52 5.02-5.454 9.145-2.89 1.144.706 2.408 1.217 3.552 1.923 2.364 1.456 4.696 2.988 7.439 4.737C32.423 7.14 37.444 6.64 42.82 10.41c2.602-2.107 1.803-7.17 6.748-6.323 3.369.587 6.478 1.217 7.439 4.878 2.289-2.281 4.221-5.693 6.877-6.42 2.624-.718 5.992 1.26 9.599 2.216-.044.054.636-.565.96-1.348 1.048-2.499 2.883-3.4 5.42-2.825 2.775.62 5.474 1.304 6.284 4.76.216.89 1.285 2.042 2.159 2.248 7.58 1.793 7.6 1.739 8.108 9.55v.012Z" class="o_text_highlight_path_scribble_4"></path></svg></span></span> answered
Top <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_4 o_text_highlight_fill">questions</span> answered
</xpath>
<xpath expr="//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_buzzy/s_accordion_image.svg?c1=o-color-2</attribute>
+1 -1
View File
@@ -18,7 +18,7 @@
<attribute name="style"/>
</xpath>
<xpath expr="//h1" position="replace" mode="inner">
Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">potential<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="translate(0 64) scale(1.304140625, 0.75)" d="M133.953 15.961c7.87.502 15.751.975 23.611 1.522 2.027.141 4.055.44 5.999.79 4.118.727 7.202 4.977 2.53 6.707.606.293 1.181.564 1.902.908-8.477 2.069-17.267 2.65-26.203 2.818-19.023.361-38.056.603-57.068 1.088-13.807.355-27.572 1.06-41.369 1.545-3.23.113-6.532.096-9.73-.147-1.548-.118-3.492-.721-4.234-1.42-.93-.88-1.484-2.199-.93-3.1.397-.655 2.812-1.263 4.41-1.33 6.397-.277 12.825-.333 19.243-.474 26.976-.592 53.942-1.156 80.919-1.804 3.742-.09 7.452-.592 11.173-.908 0-.174-.01-.35-.021-.524-2.717-.197-5.435-.53-8.163-.575-21.865-.383-43.741-1.009-65.607-.936-11.34.04-22.65 1.432-34 2.047-6.898.377-13.88.732-20.779.569-7.044-.17-9.406-3.568-5.34-6.742 3.428-2.677 7.567-4.391 13.984-4.757 16.441-.93 32.798-2.26 49.219-3.27 14.162-.868 28.366-1.516 42.549-2.266.586-.034 1.15-.147 1.641-.45-5.006 0-10.023-.012-15.029.01-1.077 0-2.154.186-3.24.192-18.793.18-37.596.355-56.389.507-10.672.085-21.343.13-32.014.153a65.89 65.89 0 0 1-6.167-.277C1.787 5.555-.02 4.247 0 2.59 0 1.384.89.72 3.293.742c5.874.056 11.748.124 17.622.09C41.045.708 61.186.409 81.317.42c28.408.012 56.827.158 85.225.417 8.686.08 17.35.7 26.015 1.122 3.23.158 5.832.902 7.024 2.678 1.055 1.572.125 2.21-2.875 1.95a30.51 30.51 0 0 0-2.268-.107c-.397 0-.805.073-1.557.146.721.451 1.306.767 1.777 1.128 2.926 2.238 1.641 4.013-3.272 4.369-13.483.958-26.966 1.91-40.459 2.767-3.334.214-6.752 0-10.118.085-2.31.062-4.609.299-6.909.462l.042.519.011.005Z" class="o_text_highlight_path_scribble_3"></path></svg></span></span>.</strong>
Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill">potential</span>.</strong>
</xpath>
<xpath expr="//div[hasclass('row')]//div[2]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_buzzy/s_banner_2.svg?c1=o-color-2</attribute>
@@ -11,7 +11,7 @@
<attribute name="class">display-4-fs</attribute>
</xpath>
<xpath expr="//h2" position="replace" mode="inner">
<span style="font-weight: normal;">Discover our</span><br/><span style="font-weight: normal;">main <span class="o_text_highlight o_translate_inline o_text_highlight_bold_2 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">three benefits<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(2.043671875, 1.8604651162790697)" d="M193.221 20.193c.555 1.245.863 2.005 1.22 2.734 1.399 2.84 2.758 5.757 1.607 9.509-1.21 3.95-3.651 4.208-6.072 4.314-5.059.212-10.129.152-15.178.592-15.873 1.367-31.737 3.585-47.619 4.238-19.921.82-39.862.638-59.802.486-13.938-.106-27.887-.88-41.825-1.428-4.018-.151-8.046-.47-12.064-.896-2.758-.304-4.772-2.46-6.21-6.182-.645-1.656-1.756-2.993-2.798-4.177-2.768-3.13-5.06-6.38-3.899-12.502C.9 15.226.393 13.16.165 11.307c-.715-5.818.903-9.524 4.722-9.646 10.218-.35 20.437-.38 30.655-.577C51.236.78 66.94-.04 82.635.264c14.652.273 29.296 1.655 43.948 2.643 19.822 1.336 39.643 2.02 59.455-.426.923-.121 1.835-.5 2.758-.622 1.329-.183 2.688-.456 4.008-.274 3.829.501 7.073 5.666 7.192 11.21.09 4.466-1.418 6.213-6.775 7.428v-.03Z" class="o_text_highlight_path_bold_2"></path></svg></span></span></span>
<span style="font-weight: normal;">Discover our</span><br/><span style="font-weight: normal;">main <span class="o_text_highlight o_translate_inline o_text_highlight_bold_2 o_text_highlight_fill">three benefits</span></span>
</xpath>
<xpath expr="(//span[hasclass('display-3-fs')])[2]" position="attributes">
<attribute name="class" add="text-o-color-2" remove="text-o-color-1" separator=" "/>
+1 -1
View File
@@ -6,7 +6,7 @@
<attribute name="src">/web_editor/shape/theme_buzzy/s_showcase.svg?c1=o-color-2</attribute>
</xpath>
<xpath expr="//h3" position="replace" mode="inner">
Features <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill" style="--text-highlight-width: 3px;"><span class="o_text_highlight_item">showcase<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="translate(0 32) scale(0.728046875, 0.375)" d="M133.953 15.961c7.87.502 15.751.975 23.611 1.522 2.027.141 4.055.44 5.999.79 4.118.727 7.202 4.977 2.53 6.707.606.293 1.181.564 1.902.908-8.477 2.069-17.267 2.65-26.203 2.818-19.023.361-38.056.603-57.068 1.088-13.807.355-27.572 1.06-41.369 1.545-3.23.113-6.532.096-9.73-.147-1.548-.118-3.492-.721-4.234-1.42-.93-.88-1.484-2.199-.93-3.1.397-.655 2.812-1.263 4.41-1.33 6.397-.277 12.825-.333 19.243-.474 26.976-.592 53.942-1.156 80.919-1.804 3.742-.09 7.452-.592 11.173-.908 0-.174-.01-.35-.021-.524-2.717-.197-5.435-.53-8.163-.575-21.865-.383-43.741-1.009-65.607-.936-11.34.04-22.65 1.432-34 2.047-6.898.377-13.88.732-20.779.569-7.044-.17-9.406-3.568-5.34-6.742 3.428-2.677 7.567-4.391 13.984-4.757 16.441-.93 32.798-2.26 49.219-3.27 14.162-.868 28.366-1.516 42.549-2.266.586-.034 1.15-.147 1.641-.45-5.006 0-10.023-.012-15.029.01-1.077 0-2.154.186-3.24.192-18.793.18-37.596.355-56.389.507-10.672.085-21.343.13-32.014.153a65.89 65.89 0 0 1-6.167-.277C1.787 5.555-.02 4.247 0 2.59 0 1.384.89.72 3.293.742c5.874.056 11.748.124 17.622.09C41.045.708 61.186.409 81.317.42c28.408.012 56.827.158 85.225.417 8.686.08 17.35.7 26.015 1.122 3.23.158 5.832.902 7.024 2.678 1.055 1.572.125 2.21-2.875 1.95a30.51 30.51 0 0 0-2.268-.107c-.397 0-.805.073-1.557.146.721.451 1.306.767 1.777 1.128 2.926 2.238 1.641 4.013-3.272 4.369-13.483.958-26.966 1.91-40.459 2.767-3.334.214-6.752 0-10.118.085-2.31.062-4.609.299-6.909.462l.042.519.011.005Z" class="o_text_highlight_path_scribble_3"></path></svg></span></span>
Features <span class="o_text_highlight o_translate_inline o_text_highlight_scribble_3 o_text_highlight_fill">showcase</span>
</xpath>
<xpath expr="(//div[hasclass('col-lg-6')])[2]" position="attributes">
<attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>
+1 -1
View File
@@ -4,7 +4,7 @@
<template id="s_banner" inherit_id="website.s_banner">
<!-- Text -->
<xpath expr="//h1" position="replace">
<h1 class="display-3 o_default_snippet_text">Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_circle_2 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">potential<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(1.2835546875, 0.6916666666666667)" d="M112.58 21.164h18.516c-.478-.176-1.722-.64-2.967-1.105.101-.401.214-.803.315-1.192 12.255 2.912 24.561 5.573 36.716 8.823 5.896 1.582 11.628 3.967 17.171 6.527 10.433 4.832 14.418 14.22 16.479 24.739.377 1.92.566 3.878.83 5.823 2.212 15.94-5.858 23.986-21.595 33.813-.993.615-2.288.79-3.181 1.494-14.229 11.308-31.412 14.32-48.608 17.107-29.01 4.694-57.431 2.209-84.91-8.372-8.145-3.138-16.164-6.853-23.706-11.22C6.176 90.986 1.16 80.053.193 67.25c-1.798-23.809 9.025-42.485 30.356-53.304C44.678 6.793 59.8 3.367 75.45 2.375 90.583 1.42 105.793.379 120.927.78c16.089.427 32.041 3.05 46.911 9.84 2.074.941 3.67 2.912 4.915 5.083-9.73-1.443-19.433-2.987-29.175-4.305-4.89-.665-9.842-1.067-14.77-1.33-23.82-1.28-47.376.514-70.391 7.003a133.771 133.771 0 0 0-22.639 8.648c-17.9 8.786-27.616 26.935-25.567 46.364.666 6.263 3.507 11.133 9.05 14.308 26.862 15.401 55.748 21.965 86.645 19.819 15.561-1.08 31.01-2.787 45.767-8.284 11.099-4.142 21.658-9.25 30.595-17.195 9.779-8.698 11.715-18.55 5.669-30.249-1.131-2.196-3.256-4.079-5.33-5.56-7.981-5.736-17.773-7.48-26.459-11.534-13.249-6.175-27.541-6.916-41.343-10.167-.817-.188-1.571-.64-2.35-.966.037-.364.088-.728.125-1.092Z" class="o_text_highlight_path_circle_2"></path></svg></span></span>.</strong></h1>
<h1 class="display-3 o_default_snippet_text">Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_circle_2 o_text_highlight_fill">potential</span>.</strong></h1>
</xpath>
<!-- Remove panels -->
<xpath expr="(//div[hasclass('o_grid_item_image')])[2]" position="replace"/>
@@ -10,7 +10,7 @@
<div class="o_we_shape o_web_editor_Origins_05" style="background-image: url('/web_editor/shape/web_editor/Origins/05.svg?c3=o-color-1');"></div>
</xpath>
<xpath expr="//h2" position="replace">
<h2 style="text-align: center;"><span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);"><span class="o_text_highlight_item">Meet The Band<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,44 h 285.4921875" class="o_text_highlight_path_underline"></path></svg></span></span></h2>
<h2 style="text-align: center;"><span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);">Meet The Band</span></h2>
</xpath>
</template>
@@ -8,7 +8,7 @@
</xpath>
<!-- Title -->
<xpath expr="//h1" position="replace" mode="inner">
Unplug &amp; Unwind: The <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 6px; --text-highlight-color: var(--o-color-1);"><span class="o_text_highlight_item">Ultimate<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,59 h 208.65625" class="o_text_highlight_path_underline"></path></svg></span></span> Music Experience
Unplug &amp; Unwind: The <span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 6px; --text-highlight-color: var(--o-color-1);">Ultimate</span> Music Experience
</xpath>
<!-- Image -->
<xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
@@ -18,7 +18,7 @@
</xpath>
<xpath expr="//div[hasclass('row')]/." position="before">
<div class="col-lg-12">
<h2 style="text-align: center;"><span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-color: var(--o-color-4); --text-highlight-width: 3px;"><span class="o_text_highlight_item">Band Gallery<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,44 h 241.765625" class="o_text_highlight_path_underline"></path></svg></span></span></h2>
<h2 style="text-align: center;"><span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-color: var(--o-color-4); --text-highlight-width: 3px;">Band Gallery</span></h2>
<p>
<br/>
</p>
+1 -1
View File
@@ -16,7 +16,7 @@
</xpath>
<!-- Title & Paragraph -->
<xpath expr="//h2" position="replace" mode="inner">
<span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);"><span class="o_text_highlight_item">Redefining modern rocks<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,34 h 373.15625" class="o_text_highlight_path_underline"/></svg></span></span>
<span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);">Redefining modern rocks</span>
</xpath>
<xpath expr="//p" position="replace" mode="inner">
<br/>
+1 -1
View File
@@ -9,7 +9,7 @@
</xpath>
<!-- Title & Paragraph -->
<xpath expr="//h2" position="replace" mode="inner">
<span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);"><span class="o_text_highlight_item">Our History<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,34 h 168.0625" class="o_text_highlight_path_underline"></path></svg></span></span>
<span class="o_text_highlight o_translate_inline o_text_highlight_underline" style="--text-highlight-width: 3px; --text-highlight-color: var(--o-color-1);">Our History</span>
</xpath>
<xpath expr="//p" position="replace" mode="inner">
<br/>
@@ -10,7 +10,7 @@
<xpath expr="//div[hasclass('row')]/." position="before">
<div class="col-lg-12">
<h2 style="text-align: center;">
<span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);"><span class="o_text_highlight_item">Upcoming concerts<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" d="M 0,44 h 371.046875" class="o_text_highlight_path_underline"></path></svg></span></span>
<span class="o_text_highlight o_text_highlight_underline o_translate_inline" style="--text-highlight-width: 4px; --text-highlight-color: var(--o-color-4);">Upcoming concerts</span>
</h2>
<p>
<br/>