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_bookstore/static/description/theme_bookstore.svg
+51 -38
View File
@@ -43,19 +43,32 @@
<pattern width="1" height="1" id="theme_bookstore_s_product_list_default_image_6_id" patternunits="objectBoundingBox">
<image width="158" height="158" preserveAspectRatio="xMidYMid slice" href="#s_product_list_default_image_6_url"/>
</pattern>
<filter id="filter_readability_bookstore">
<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_bookstore">
<rect width="700" height="1850" fill="#FFFFFF"/>
<g class="svgc_menu" transform="translate(-1428 -220)">
<rect width="700" height="37" transform="translate(1428 247)" class="svgc_menu_bg" fill="#MENU_COLOR"/>
<path d="M76.345,23V21.479H72.6V14.273H70.759V23Zm4.68.12a4.131,4.131,0,0,0,2.08-.527,3.749,3.749,0,0,0,1.467-1.528,5.054,5.054,0,0,0,.539-2.429,5.059,5.059,0,0,0-.54-2.429,3.755,3.755,0,0,0-1.465-1.527,4.388,4.388,0,0,0-4.17,0,3.739,3.739,0,0,0-1.461,1.527,5.084,5.084,0,0,0-.537,2.43,5.07,5.07,0,0,0,.537,2.424,3.753,3.753,0,0,0,1.461,1.53,4.138,4.138,0,0,0,2.088.528Zm0-1.633a2.08,2.08,0,0,1-1.168-.328,2.128,2.128,0,0,1-.774-.963,3.929,3.929,0,0,1-.275-1.56,3.935,3.935,0,0,1,.275-1.56,2.114,2.114,0,0,1,.774-.962,2.242,2.242,0,0,1,2.335,0,2.121,2.121,0,0,1,.773.963,3.911,3.911,0,0,1,.275,1.56,3.909,3.909,0,0,1-.275,1.559,2.12,2.12,0,0,1-.773.963,2.075,2.075,0,0,1-1.168.328ZM90.3,23.119a4.152,4.152,0,0,0,1.952-.445,3.292,3.292,0,0,0,1.338-1.27,3.823,3.823,0,0,0,.486-1.975v-1.1H90.426v1.39H92.3l0,.126a1.886,1.886,0,0,1-.157.645l-.073.14a1.591,1.591,0,0,1-.682.633,2.35,2.35,0,0,1-1.071.224,2.127,2.127,0,0,1-1.2-.334,2.151,2.151,0,0,1-.784-.974,3.9,3.9,0,0,1-.277-1.551,3.805,3.805,0,0,1,.281-1.545,2.174,2.174,0,0,1,.787-.965,2.086,2.086,0,0,1,1.174-.332,2.283,2.283,0,0,1,.654.089,1.778,1.778,0,0,1,.528.258,1.6,1.6,0,0,1,.394.409,1.94,1.94,0,0,1,.252.552H94a3.19,3.19,0,0,0-.4-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.3,3.756,3.756,0,0,0-1.3.882,4.021,4.021,0,0,0-.867,1.413,5.417,5.417,0,0,0-.309,1.894,5.141,5.141,0,0,0,.518,2.384,3.725,3.725,0,0,0,1.447,1.547,4.2,4.2,0,0,0,2.156.543Zm8.958,0a4.137,4.137,0,0,0,2.081-.526,3.747,3.747,0,0,0,1.466-1.528,5.054,5.054,0,0,0,.54-2.429,5.059,5.059,0,0,0-.54-2.429,3.763,3.763,0,0,0-1.466-1.527,4.386,4.386,0,0,0-4.169,0,3.742,3.742,0,0,0-1.462,1.527,5.084,5.084,0,0,0-.537,2.43,5.07,5.07,0,0,0,.537,2.424,3.756,3.756,0,0,0,1.462,1.53A4.133,4.133,0,0,0,99.26,23.119Zm0-1.632a2.081,2.081,0,0,1-1.168-.328,2.127,2.127,0,0,1-.773-.963,3.911,3.911,0,0,1-.275-1.56,3.918,3.918,0,0,1,.275-1.56,2.112,2.112,0,0,1,.773-.962,2.242,2.242,0,0,1,2.335,0,2.123,2.123,0,0,1,.774.963,3.929,3.929,0,0,1,.275,1.56A3.927,3.927,0,0,1,101.2,20.2a2.128,2.128,0,0,1-.774.963A2.075,2.075,0,0,1,99.26,21.487Z" transform="translate(1428 247)" class="svgc_text" opacity="1" fill="#MENU_COLOR"/>
<path d="M76.345,23V21.479H72.6V14.273H70.759V23Zm4.68.12a4.131,4.131,0,0,0,2.08-.527,3.749,3.749,0,0,0,1.467-1.528,5.054,5.054,0,0,0,.539-2.429,5.059,5.059,0,0,0-.54-2.429,3.755,3.755,0,0,0-1.465-1.527,4.388,4.388,0,0,0-4.17,0,3.739,3.739,0,0,0-1.461,1.527,5.084,5.084,0,0,0-.537,2.43,5.07,5.07,0,0,0,.537,2.424,3.753,3.753,0,0,0,1.461,1.53,4.138,4.138,0,0,0,2.088.528Zm0-1.633a2.08,2.08,0,0,1-1.168-.328,2.128,2.128,0,0,1-.774-.963,3.929,3.929,0,0,1-.275-1.56,3.935,3.935,0,0,1,.275-1.56,2.114,2.114,0,0,1,.774-.962,2.242,2.242,0,0,1,2.335,0,2.121,2.121,0,0,1,.773.963,3.911,3.911,0,0,1,.275,1.56,3.909,3.909,0,0,1-.275,1.559,2.12,2.12,0,0,1-.773.963,2.075,2.075,0,0,1-1.168.328ZM90.3,23.119a4.152,4.152,0,0,0,1.952-.445,3.292,3.292,0,0,0,1.338-1.27,3.823,3.823,0,0,0,.486-1.975v-1.1H90.426v1.39H92.3l0,.126a1.886,1.886,0,0,1-.157.645l-.073.14a1.591,1.591,0,0,1-.682.633,2.35,2.35,0,0,1-1.071.224,2.127,2.127,0,0,1-1.2-.334,2.151,2.151,0,0,1-.784-.974,3.9,3.9,0,0,1-.277-1.551,3.805,3.805,0,0,1,.281-1.545,2.174,2.174,0,0,1,.787-.965,2.086,2.086,0,0,1,1.174-.332,2.283,2.283,0,0,1,.654.089,1.778,1.778,0,0,1,.528.258,1.6,1.6,0,0,1,.394.409,1.94,1.94,0,0,1,.252.552H94a3.19,3.19,0,0,0-.4-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.3,3.756,3.756,0,0,0-1.3.882,4.021,4.021,0,0,0-.867,1.413,5.417,5.417,0,0,0-.309,1.894,5.141,5.141,0,0,0,.518,2.384,3.725,3.725,0,0,0,1.447,1.547,4.2,4.2,0,0,0,2.156.543Zm8.958,0a4.137,4.137,0,0,0,2.081-.526,3.747,3.747,0,0,0,1.466-1.528,5.054,5.054,0,0,0,.54-2.429,5.059,5.059,0,0,0-.54-2.429,3.763,3.763,0,0,0-1.466-1.527,4.386,4.386,0,0,0-4.169,0,3.742,3.742,0,0,0-1.462,1.527,5.084,5.084,0,0,0-.537,2.43,5.07,5.07,0,0,0,.537,2.424,3.756,3.756,0,0,0,1.462,1.53A4.133,4.133,0,0,0,99.26,23.119Zm0-1.632a2.081,2.081,0,0,1-1.168-.328,2.127,2.127,0,0,1-.773-.963,3.911,3.911,0,0,1-.275-1.56,3.918,3.918,0,0,1,.275-1.56,2.112,2.112,0,0,1,.773-.962,2.242,2.242,0,0,1,2.335,0,2.123,2.123,0,0,1,.774.963,3.929,3.929,0,0,1,.275,1.56A3.927,3.927,0,0,1,101.2,20.2a2.128,2.128,0,0,1-.774.963A2.075,2.075,0,0,1,99.26,21.487Z" transform="translate(1428 247)" class="svgc_text" opacity="1" fill="#MENU_COLOR" filter="url(#filter_readability_bookstore)"/>
<g transform="translate(1587 262)" opacity="0.4">
<rect width="37" height="7" fill="#MENU_COLOR" class="svgc_text"/>
<rect width="37" height="7" transform="translate(58)" fill="#MENU_COLOR" class="svgc_text"/>
<rect width="37" height="7" transform="translate(116)" fill="#MENU_COLOR" class="svgc_text"/>
<rect width="37" height="7" transform="translate(174)" fill="#MENU_COLOR" class="svgc_text"/>
<rect width="37" height="7" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="37" height="7" transform="translate(58)" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="37" height="7" transform="translate(116)" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="37" height="7" transform="translate(174)" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
</g>
<rect width="37" height="7" transform="translate(2021 262)" fill="#MENU_COLOR" opacity="1" class="svgc_text"/>
<rect width="37" height="7" transform="translate(2021 262)" fill="#MENU_COLOR" opacity="1" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="700" height="28" transform="translate(1428 220)" fill="#F6F6F6"/>
<circle cx="5" cy="5" r="5" transform="translate(2048 229.908)" fill="#3AADAA"/>
<circle cx="5" cy="5" r="5" transform="translate(2036 229.908)" fill="#3AADAA"/>
@@ -135,10 +148,10 @@
<rect width="175" height="98" transform="translate(525 374)" fill="#7C6576"/>
<path d="M175,37.613,87.186,1.893,0,37.393V36.171L87.186.672,175,36.391v1.221Zm0-3.238L90.744,0h1L175,33.967v.407ZM0,34.119H0v-.407L82.778,0h1Zm175-2.611L97.784,0h1L175,31.1v.407ZM0,31.252H0v-.407L75.676,0h1Zm175-2.61L104.887,0h1L175,28.234v.407ZM0,28.385H0v-.407L68.6,0h1L0,28.385Zm175-2.61L111.865,0h1L175,25.368v.407ZM0,25.519H0v-.407L61.546,0h1ZM175,22.9,118.88,0h1L175,22.489V22.9ZM0,22.652H0v-.407L54.506,0h1Zm175-2.623L125.983,0h1L175,19.622v.407ZM0,19.785H0v-.407L47.466,0h1Zm175-2.622L132.8,0h1L175,16.756v.407ZM0,16.919H0v-.407L40.426,0h1ZM175,14.3,140.1,0h.995L175,13.888V14.3ZM0,14.052H0v-.407L33.387,0h1Zm175-2.623L147.166,0h.993L175,11.021v.408ZM0,11.185H0v-.407L26.347,0h1ZM175,8.563,153.968,0h1L175,8.156v.407ZM0,8.319H0V7.911L19.345,0h1L0,8.319ZM175,5.7,161.209,0h.988L175,5.288V5.7ZM0,5.451H0V5.043L12.283,0h.993ZM175,2.83,168.036,0h1L175,2.423V2.83ZM0,2.582H0V2.174L5.261,0h.988Z" transform="translate(525 374)" fill="#3AADAA"/>
<g transform="translate(565.953 406)">
<text transform="translate(49.047 14)" fill="#7C6576" class="svgc_text" font-size="20" font-family="DMSerifDisplay-Regular, DM Serif Display"><tspan x="-49.59" y="0">Entry Title</tspan></text>
<text transform="translate(49.047 14)" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_bookstore)" font-size="20" font-family="DMSerifDisplay-Regular, DM Serif Display"><tspan x="-49.59" y="0">Entry Title</tspan></text>
<g transform="translate(3 26.877)" opacity="0.4">
<rect width="86.811" height="2" fill="#7C6576" class="svgc_text"/>
<rect width="71.811" height="2" transform="translate(8 5)" fill="#7C6576" class="svgc_text"/>
<rect width="86.811" height="2" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="71.811" height="2" transform="translate(8 5)" fill="#7C6576" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
</g>
</g>
</g>
@@ -318,37 +331,37 @@
</g>
<g class="svgc_footer">
<rect width="700" height="112" transform="translate(0 1738)" class="svgc_footer_bg" fill="#FOOTER_COLOR"/>
<rect width="47" height="2" transform="translate(70 1808)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(70 1813)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(163 1808)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(163 1813)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(256 1808)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(256 1813)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(70 1797)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(70 1802)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(163 1797)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(163 1802)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(256 1797)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(256 1802)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(70 1786)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(70 1791)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(163 1786)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(163 1791)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(256 1786)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="39" height="2" transform="translate(256 1791)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="72" height="2" transform="translate(350 1786)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="60" height="2" transform="translate(350 1791)" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="47" height="2" transform="translate(70 1808)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(70 1813)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(163 1808)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(163 1813)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(256 1808)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(256 1813)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(70 1797)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(70 1802)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(163 1797)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(163 1802)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(256 1797)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(256 1802)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(70 1786)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(70 1791)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(163 1786)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(163 1791)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="2" transform="translate(256 1786)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="39" height="2" transform="translate(256 1791)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="72" height="2" transform="translate(350 1786)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="60" height="2" transform="translate(350 1791)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<g transform="translate(490 1786)" opacity="0.4">
<rect width="140" height="2" fill="#FOOTER_COLOR" class="svgc_text"/>
<rect width="125" 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="140" height="2" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="125" height="2" transform="translate(0 5)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="79" height="2" transform="translate(0 10)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
<rect width="91" height="2" transform="translate(0 15)" fill="#FOOTER_COLOR" class="svgc_text" filter="url(#filter_readability_bookstore)"/>
</g>
<rect width="47" height="4" transform="translate(70 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1"/>
<rect width="47" height="4" transform="translate(163 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1"/>
<rect width="47" height="4" transform="translate(256 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1"/>
<rect width="47" height="4" transform="translate(350 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1"/>
<rect width="47" height="4" transform="translate(490 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1"/>
<rect width="47" height="4" transform="translate(70 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="4" transform="translate(163 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="4" transform="translate(256 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="4" transform="translate(350 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1" filter="url(#filter_readability_bookstore)"/>
<rect width="47" height="4" transform="translate(490 1772)" fill="#FOOTER_COLOR" class="svgc_text" opacity="1" filter="url(#filter_readability_bookstore)"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 79 KiB