NextERP/design-themes
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[FIX] theme_*: fix svg previews readability on safari

Browse Source 
In Safari (14+) the CSS workaround to make block "readable" over any bg
is broken. By replacing the current CSS workaround by an appropriate
SVG filter in each themes svg, the problem will be fixed.
This commit will add the svg filter.

task-2667028

closes odoo/design-themes#538

X-original-commit: 545cf002ea
Related: odoo/odoo#81190
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
xlu-odoo
2021-10-14 14:09:40 +00:00
committed by qsm-odoo
parent 99a3c80a00
commit bcb74695ed
26 changed files with 1035 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme_anelusia/static/description/theme_anelusia.svg
+45 -32
View File
@@ -78,28 +78,41 @@
<pattern id="theme_anelusia_s_reference_demo_image_6" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 24 24">
<image width="24" height="24" href="/web/image/website.s_reference_demo_image_2"/>
</pattern>
<filter id="filter_readability_anelusia">
<feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="linear" slope="10000" intercept="-4999.5"/>
<feFuncG type="linear" slope="10000" intercept="-4999.5"/>
<feFuncB type="linear" slope="10000" intercept="-4999.5"/>
</feComponentTransfer>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" class="theme_anelusia">
<rect width="700" height="1850" fill="#FFFFFF"/>
<g class="svgc_menu">
<rect class="svgc_menu_bg" fill="#MENU_COLOR" width="700" height="37"/>
<path class="svgc_text" opacity="1" fill="#MENU_COLOR" fill-rule="nonzero" d="M76.345 23v-1.521h-3.741v-7.206h-1.845V23h5.586zm4.68.12c.77 0 1.463-.176 2.08-.527.619-.35 1.107-.86 1.467-1.528.36-.667.539-1.477.539-2.429 0-.951-.18-1.761-.54-2.429-.359-.667-.847-1.176-1.465-1.527-.618-.351-1.312-.527-2.082-.527-.775 0-1.471.176-2.088.527-.616.35-1.104.86-1.461 1.527-.358.668-.537 1.478-.537 2.43 0 .948.179 1.756.537 2.424a3.753 3.753 0 0 0 1.461 1.53c.617.352 1.313.528 2.088.528zm0-1.633a2.08 2.08 0 0 1-1.168-.328c-.333-.219-.59-.54-.774-.963-.183-.423-.275-.943-.275-1.56 0-.616.092-1.136.275-1.56.183-.423.441-.744.774-.962a2.075 2.075 0 0 1 1.167-.328c.446 0 .835.109 1.168.328.332.218.59.54.773.963.184.423.275.943.275 1.56 0 .616-.091 1.136-.275 1.559-.183.423-.44.744-.773.963a2.075 2.075 0 0 1-1.168.328zm9.277 1.632c.733 0 1.384-.148 1.952-.445a3.292 3.292 0 0 0 1.338-1.27c.324-.55.486-1.208.486-1.975v-1.1h-3.652v1.39h1.872l-.004.126c-.017.237-.07.452-.157.645l-.073.14a1.591 1.591 0 0 1-.682.633c-.296.15-.654.224-1.071.224-.46 0-.86-.111-1.198-.334-.338-.223-.6-.548-.784-.974-.184-.426-.277-.943-.277-1.551s.094-1.123.281-1.545c.188-.422.45-.744.787-.965a2.086 2.086 0 0 1 1.174-.332c.238 0 .456.03.654.089.197.06.373.146.528.258.155.112.286.248.394.409.108.16.192.344.252.552h1.875a3.19 3.19 0 0 0-.405-1.187 3.27 3.27 0 0 0-.812-.931 3.741 3.741 0 0 0-1.135-.607 4.3 4.3 0 0 0-1.381-.216 4.21 4.21 0 0 0-1.607.303 3.756 3.756 0 0 0-1.3.882 4.021 4.021 0 0 0-.867 1.413c-.206.555-.309 1.186-.309 1.894 0 .92.173 1.715.518 2.384a3.725 3.725 0 0 0 1.447 1.547c.62.362 1.338.543 2.156.543zm8.958 0c.77 0 1.463-.175 2.081-.526.618-.35 1.107-.86 1.466-1.528.36-.667.54-1.477.54-2.429 0-.951-.18-1.761-.54-2.429-.36-.667-.848-1.176-1.466-1.527s-1.311-.527-2.081-.527c-.776 0-1.472.176-2.088.527-.617.35-1.104.86-1.462 1.527-.358.668-.537 1.478-.537 2.43 0 .948.179 1.756.537 2.424.358.668.845 1.178 1.462 1.53.616.352 1.312.528 2.088.528zm0-1.632c-.446 0-.836-.11-1.168-.328-.332-.219-.59-.54-.773-.963-.184-.423-.275-.943-.275-1.56 0-.616.091-1.136.275-1.56.183-.423.44-.744.773-.962a2.075 2.075 0 0 1 1.168-.328c.446 0 .835.109 1.167.328.333.218.59.54.774.963.183.423.275.943.275 1.56 0 .616-.092 1.136-.275 1.559-.184.423-.441.744-.774.963a2.075 2.075 0 0 1-1.167.328z"/>
<path class="svgc_text" opacity="1" fill="#MENU_COLOR" fill-rule="nonzero" filter="url(#filter_readability_anelusia)" d="M76.345 23v-1.521h-3.741v-7.206h-1.845V23h5.586zm4.68.12c.77 0 1.463-.176 2.08-.527.619-.35 1.107-.86 1.467-1.528.36-.667.539-1.477.539-2.429 0-.951-.18-1.761-.54-2.429-.359-.667-.847-1.176-1.465-1.527-.618-.351-1.312-.527-2.082-.527-.775 0-1.471.176-2.088.527-.616.35-1.104.86-1.461 1.527-.358.668-.537 1.478-.537 2.43 0 .948.179 1.756.537 2.424a3.753 3.753 0 0 0 1.461 1.53c.617.352 1.313.528 2.088.528zm0-1.633a2.08 2.08 0 0 1-1.168-.328c-.333-.219-.59-.54-.774-.963-.183-.423-.275-.943-.275-1.56 0-.616.092-1.136.275-1.56.183-.423.441-.744.774-.962a2.075 2.075 0 0 1 1.167-.328c.446 0 .835.109 1.168.328.332.218.59.54.773.963.184.423.275.943.275 1.56 0 .616-.091 1.136-.275 1.559-.183.423-.44.744-.773.963a2.075 2.075 0 0 1-1.168.328zm9.277 1.632c.733 0 1.384-.148 1.952-.445a3.292 3.292 0 0 0 1.338-1.27c.324-.55.486-1.208.486-1.975v-1.1h-3.652v1.39h1.872l-.004.126c-.017.237-.07.452-.157.645l-.073.14a1.591 1.591 0 0 1-.682.633c-.296.15-.654.224-1.071.224-.46 0-.86-.111-1.198-.334-.338-.223-.6-.548-.784-.974-.184-.426-.277-.943-.277-1.551s.094-1.123.281-1.545c.188-.422.45-.744.787-.965a2.086 2.086 0 0 1 1.174-.332c.238 0 .456.03.654.089.197.06.373.146.528.258.155.112.286.248.394.409.108.16.192.344.252.552h1.875a3.19 3.19 0 0 0-.405-1.187 3.27 3.27 0 0 0-.812-.931 3.741 3.741 0 0 0-1.135-.607 4.3 4.3 0 0 0-1.381-.216 4.21 4.21 0 0 0-1.607.303 3.756 3.756 0 0 0-1.3.882 4.021 4.021 0 0 0-.867 1.413c-.206.555-.309 1.186-.309 1.894 0 .92.173 1.715.518 2.384a3.725 3.725 0 0 0 1.447 1.547c.62.362 1.338.543 2.156.543zm8.958 0c.77 0 1.463-.175 2.081-.526.618-.35 1.107-.86 1.466-1.528.36-.667.54-1.477.54-2.429 0-.951-.18-1.761-.54-2.429-.36-.667-.848-1.176-1.466-1.527s-1.311-.527-2.081-.527c-.776 0-1.472.176-2.088.527-.617.35-1.104.86-1.462 1.527-.358.668-.537 1.478-.537 2.43 0 .948.179 1.756.537 2.424.358.668.845 1.178 1.462 1.53.616.352 1.312.528 2.088.528zm0-1.632c-.446 0-.836-.11-1.168-.328-.332-.219-.59-.54-.773-.963-.184-.423-.275-.943-.275-1.56 0-.616.091-1.136.275-1.56.183-.423.44-.744.773-.962a2.075 2.075 0 0 1 1.168-.328c.446 0 .835.109 1.167.328.333.218.59.54.774.963.183.423.275.943.275 1.56 0 .616-.092 1.136-.275 1.559-.184.423-.441.744-.774.963a2.075 2.075 0 0 1-1.167.328z"/>
<g opacity=".6" transform="translate(245 15)">
<rect fill="#MENU_COLOR" class="svgc_text" width="37" height="7"/>
<rect fill="#MENU_COLOR" class="svgc_text" width="37" height="7" x="58"/>
<rect fill="#MENU_COLOR" class="svgc_text" width="37" height="7" x="116"/>
<rect fill="#MENU_COLOR" class="svgc_text" width="37" height="7" x="174"/>
<rect fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)" width="37" height="7"/>
<rect fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)" width="37" height="7" x="58"/>
<rect fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)" width="37" height="7" x="116"/>
<rect fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)" width="37" height="7" x="174"/>
</g>
<rect width="37" height="7" x="593" y="15" fill="#MENU_COLOR" opacity="1" class="svgc_text"/>
<rect width="37" height="7" x="593" y="15" fill="#MENU_COLOR" opacity="1" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<g class="s_banner" transform="translate(0 35.5)">
<rect width="234" height="310" transform="translate(0 1.5)" fill="#3AADAA"/>
<rect fill="url(#theme_anelusia_s_banner_default_image_id)" class="img_reference_s_banner_default_image" width="466" height="310" transform="translate(234 1.5)"/>
<g transform="translate(-32 -404.881)">
<text transform="translate(242 519.381)" fill="#3AADAA" class="svgc_text" font-size="30" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-131.162" y="0">Welcome</tspan><tspan x="-126.738" y="37">Message</tspan></text>
<text transform="translate(242 519.381)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)" font-size="30" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-131.162" y="0">Welcome</tspan><tspan x="-126.738" y="37">Message</tspan></text>
<g transform="translate(108.63 545)" opacity="0.4">
<rect width="131" height="2" transform="translate(1.37 32.025)" fill="#3AADAA" class="svgc_text"/>
<rect width="116" height="2" transform="translate(16.37 37.025)" fill="#3AADAA" class="svgc_text"/>
<rect width="131" height="2" transform="translate(1.37 32.025)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="116" height="2" transform="translate(16.37 37.025)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<g transform="translate(-56 -31)">
<rect width="94" height="28" rx="14" transform="translate(203 630)" fill="#383E45"/>
@@ -119,27 +132,27 @@
<g transform="translate(0 9)">
<rect width="234" height="200" transform="translate(-243 821)" fill="#7C6576"/>
<g transform="translate(-191 853.966)">
<text transform="translate(119 64.034)" fill="#7C6576" class="svgc_text" font-size="22" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-107.175" y="0">Entry Title</tspan></text>
<text transform="translate(119 64.034)" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_anelusia)" font-size="22" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-107.175" y="0">Entry Title</tspan></text>
<g transform="translate(0 84.225)" opacity="0.4">
<rect width="131" height="2" fill="#7C6576" class="svgc_text"/>
<rect width="116" height="2" transform="translate(8 5)" fill="#7C6576" class="svgc_text"/>
<rect width="131" height="2" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="116" height="2" transform="translate(8 5)" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<rect width="94" height="28" rx="14" transform="translate(19 106.2)" fill="#3AADAA"/>
<text transform="translate(66 124.034)" fill="#FFFFFF" font-size="11" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-23.235" y="0">Discover</tspan></text>
<circle cx="14" cy="14" r="14" transform="translate(52)" fill="#7C6576" class="svgc_text"/>
<circle cx="14" cy="14" r="14" transform="translate(52)" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
</g>
<g transform="translate(234 9)">
<rect width="233" height="200" transform="translate(-243 821)" fill="#3AADAA"/>
<g transform="translate(-191 853.966)">
<text transform="translate(119 64.034)" fill="#3AADAA" class="svgc_text" font-size="22" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-107.175" y="0">Entry Title</tspan></text>
<text transform="translate(119 64.034)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)" font-size="22" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-107.175" y="0">Entry Title</tspan></text>
<g transform="translate(0 84.225)" opacity="0.4">
<rect width="131" height="2" fill="#3AADAA" class="svgc_text"/>
<rect width="116" height="2" transform="translate(8 5)" fill="#3AADAA" class="svgc_text"/>
<rect width="131" height="2" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="116" height="2" transform="translate(8 5)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<rect width="94" height="28" rx="14" transform="translate(19 106.2)" fill="#383E45"/>
<text transform="translate(66 124.034)" fill="#FFFFFF" font-size="11" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-23.235" y="0">Discover</tspan></text>
<circle cx="14" cy="14" r="14" transform="translate(52)" fill="#3AADAA" class="svgc_text"/>
<circle cx="14" cy="14" r="14" transform="translate(52)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
</g>
<g transform="translate(467 9)">
@@ -290,10 +303,10 @@
<text transform="translate(273 648)" fill="#FFFFFF" font-size="11" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-46.471" y="0">Discover</tspan></text>
</g>
<g transform="translate(-193.37 2043.975)" opacity="0.4">
<rect width="131" height="2" transform="translate(1.37 32.025)" fill="#3AADAA" class="svgc_text"/>
<rect width="116" height="2" transform="translate(9.37 37.025)" fill="#3AADAA" class="svgc_text"/>
<rect width="131" height="2" transform="translate(1.37 32.025)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="116" height="2" transform="translate(9.37 37.025)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<text transform="translate(-62 2056)" fill="#3AADAA" class="svgc_text" font-size="22" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-130.399" y="0">Section Title</tspan></text>
<text transform="translate(-62 2056)" fill="#3AADAA" class="svgc_text" filter="url(#filter_readability_anelusia)" font-size="22" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-130.399" y="0">Section Title</tspan></text>
</g>
<g transform="translate(167.865 -314.98)">
<path d="M-114.633,401.411h0l-17.434-25.269-25.271-17.435,21.344-14.726h42.723l21.344,14.726L-97.2,376.141l-17.434,25.269Z" transform="translate(85 1835)" fill="url(#theme_anelusia_linear-gradient_2)"/>
@@ -323,29 +336,29 @@
<g transform="translate(0 14)">
<g>
<g transform="translate(-69 -23)">
<circle cy="7.5" r="7.5" transform="translate(559 100)" fill="#FOOTER_COLOR" class="svgc_text"/>
<circle cy="7.5" r="7.5" transform="translate(587 100)" fill="#FOOTER_COLOR" class="svgc_text"/>
<circle cy="7.5" r="7.5" transform="translate(615 100)" fill="#FOOTER_COLOR" class="svgc_text"/>
<circle cy="7.5" r="7.5" transform="translate(559 100)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<circle cy="7.5" r="7.5" transform="translate(587 100)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<circle cy="7.5" r="7.5" transform="translate(615 100)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<g transform="translate(-265 -1692)">
<rect width="93" height="2" transform="translate(475 1773)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="78" height="2" transform="translate(475 1778)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="93" height="2" transform="translate(475 1773)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="78" height="2" transform="translate(475 1778)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
<g transform="translate(-405 -1692)">
<rect width="47" height="2" transform="translate(475 1773)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(475 1778)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(475 1773)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="39" height="2" transform="translate(475 1778)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
</g>
<g transform="translate(0 -18)">
<g transform="translate(210 60)" opacity="0.6">
<g>
<rect width="184" height="2" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="169" height="2" transform="translate(0 5)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="79" height="2" transform="translate(0 10)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="91" height="2" transform="translate(0 15)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="184" height="2" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="169" height="2" transform="translate(0 5)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="79" height="2" transform="translate(0 10)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
<rect width="91" height="2" transform="translate(0 15)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)"/>
</g>
</g>
<text transform="translate(158 75)" fill="#FOOTER_COLOR" class="svgc_text" font-size="18" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-87.688" y="0">Entry Title</tspan></text>
<text transform="translate(158 75)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_anelusia)" font-size="18" font-family="Arial-BoldMT, Arial, sans-serif" font-weight="700"><tspan x="-87.688" y="0">Entry Title</tspan></text>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 36 KiB