NextERP/design-themes
2
0
Fork 0
mirror of https://github.com/odoo/design-themes.git synced 2025-10-07 01:18:52 +07:00
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#522

Related: odoo/odoo#78617
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 208f6134a6
commit 545cf002ea
27 changed files with 1068 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme_kiddo/static/description/theme_kiddo.svg
+33 -20
View File
@@ -16,6 +16,19 @@
<mask id="theme_kiddo_mask" x="151.6" y="367.57" width="134.11" height="181.76" maskUnits="userSpaceOnUse">
<polygon points="285.71 367.57 151.6 367.57 151.6 549.33 285.71 549.33 285.71 367.57" fill="#FFFFFF"/>
</mask>
<filter id="filter_readability_kiddo">
<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>
<!-- Layout -->
<g class="theme_kiddo">
@@ -26,21 +39,21 @@
<rect class="svgc_footer" fill="#FOOTER_COLOR" y="1712.83" width="700.56" height="137.17"/>
<!-- Content -->
<g opacity="0.55">
<circle cx="561.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR"/>
<circle cx="581.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR"/>
<circle cx="601.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="337.12" y="1779.26" width="173.79" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="337.12" y="1784.26" width="153.89" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="337.12" y="1789.26" width="104.8" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="337.12" y="1794.26" width="120.72" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<circle cx="621.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="70.61" y="1779.26" width="205.45" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="70.61" y="1753.01" width="155.02" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="70.61" y="1784.26" width="181.92" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="70.61" y="1789.26" width="197.08" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="70.61" y="1794.26" width="123.76" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="553.85" y="1779.26" width="65.58" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<rect x="553.85" y="1784.26" width="75.54" height="2" class="svgc_text" fill="#FOOTER_COLOR"/>
<circle cx="561.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<circle cx="581.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<circle cx="601.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="337.12" y="1779.26" width="173.79" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="337.12" y="1784.26" width="153.89" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="337.12" y="1789.26" width="104.8" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="337.12" y="1794.26" width="120.72" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<circle cx="621.35" cy="1802.49" r="7.5" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="70.61" y="1779.26" width="205.45" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="70.61" y="1753.01" width="155.02" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="70.61" y="1784.26" width="181.92" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="70.61" y="1789.26" width="197.08" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="70.61" y="1794.26" width="123.76" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="553.85" y="1779.26" width="65.58" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
<rect x="553.85" y="1784.26" width="75.54" height="2" class="svgc_text" fill="#FOOTER_COLOR" filter="url(#filter_readability_kiddo)"/>
</g>
</g>
@@ -416,15 +429,15 @@
<!-- Menu Background -->
<rect width="700" height="37" fill="#MENU_COLOR" class="svgc_menu_bg" filter="drop-shadow(0 2px 1.5px rgba(0,0,0,.4))"/>
<!-- Logo -->
<path class="svgc_text" opacity="1" fill="#MENU_COLOR" d="M76.35,23V21.48H72.6V14.27H70.76V23Zm4.68.12a4.18,4.18,0,0,0,2.08-.53,3.82,3.82,0,0,0,1.46-1.52,5.07,5.07,0,0,0,.54-2.43,5.07,5.07,0,0,0-.54-2.43,3.78,3.78,0,0,0-1.46-1.53A4.19,4.19,0,0,0,81,14.15a4.12,4.12,0,0,0-2.08.53,3.66,3.66,0,0,0-1.46,1.53,5.07,5.07,0,0,0-.54,2.43,5,5,0,0,0,.54,2.42,3.71,3.71,0,0,0,1.46,1.53,4.12,4.12,0,0,0,2.08.53Zm0-1.63a2.09,2.09,0,0,1-1.17-.33,2.15,2.15,0,0,1-.78-1,4,4,0,0,1-.27-1.56,4,4,0,0,1,.27-1.56,2.12,2.12,0,0,1,.78-1A2.05,2.05,0,0,1,81,15.79a2.14,2.14,0,0,1,1.17.32,2.19,2.19,0,0,1,.78,1,4,4,0,0,1,.27,1.56A4,4,0,0,1,83,20.2a2.15,2.15,0,0,1-.78,1,2.09,2.09,0,0,1-1.17.33Zm9.27,1.63a4.07,4.07,0,0,0,2-.45,3.16,3.16,0,0,0,1.34-1.27,3.74,3.74,0,0,0,.49-2v-1.1H90.43v1.39H92.3v.13a1.88,1.88,0,0,1-.15.64l-.08.14a1.59,1.59,0,0,1-.68.63,2.32,2.32,0,0,1-1.07.23,2.09,2.09,0,0,1-1.2-.34,2.12,2.12,0,0,1-.78-1,4.43,4.43,0,0,1,0-3.1,2.16,2.16,0,0,1,.79-1,2,2,0,0,1,1.17-.33,2.29,2.29,0,0,1,.66.09,1.85,1.85,0,0,1,.53.25,1.9,1.9,0,0,1,.39.41,2,2,0,0,1,.25.55H94a3.32,3.32,0,0,0-.41-1.18,3.15,3.15,0,0,0-.81-.93,3.54,3.54,0,0,0-1.13-.61,4.39,4.39,0,0,0-1.39-.22,4.18,4.18,0,0,0-1.6.31,3.74,3.74,0,0,0-1.3.88,3.88,3.88,0,0,0-.87,1.41,5.37,5.37,0,0,0-.31,1.9A5.07,5.07,0,0,0,86.7,21a3.73,3.73,0,0,0,1.45,1.55,4.19,4.19,0,0,0,2.15.54Zm9,0a4.15,4.15,0,0,0,2.08-.53,3.78,3.78,0,0,0,1.47-1.52,5.07,5.07,0,0,0,.54-2.43,5.07,5.07,0,0,0-.54-2.43,3.74,3.74,0,0,0-1.47-1.53,4.37,4.37,0,0,0-4.17,0,3.78,3.78,0,0,0-1.46,1.53,5.07,5.07,0,0,0-.54,2.43,5,5,0,0,0,.54,2.42,3.78,3.78,0,0,0,1.46,1.53A4.16,4.16,0,0,0,99.26,23.12Zm0-1.63a2.06,2.06,0,0,1-1.17-.33,2.13,2.13,0,0,1-.77-1A4,4,0,0,1,97,18.64a4,4,0,0,1,.28-1.56,2,2,0,0,1,1.94-1.29,2.14,2.14,0,0,1,1.17.32,2.1,2.1,0,0,1,.77,1,4,4,0,0,1,.28,1.56,4,4,0,0,1-.28,1.56,2,2,0,0,1-1.94,1.29Z"/>
<path class="svgc_text" opacity="1" fill="#MENU_COLOR" d="M76.35,23V21.48H72.6V14.27H70.76V23Zm4.68.12a4.18,4.18,0,0,0,2.08-.53,3.82,3.82,0,0,0,1.46-1.52,5.07,5.07,0,0,0,.54-2.43,5.07,5.07,0,0,0-.54-2.43,3.78,3.78,0,0,0-1.46-1.53A4.19,4.19,0,0,0,81,14.15a4.12,4.12,0,0,0-2.08.53,3.66,3.66,0,0,0-1.46,1.53,5.07,5.07,0,0,0-.54,2.43,5,5,0,0,0,.54,2.42,3.71,3.71,0,0,0,1.46,1.53,4.12,4.12,0,0,0,2.08.53Zm0-1.63a2.09,2.09,0,0,1-1.17-.33,2.15,2.15,0,0,1-.78-1,4,4,0,0,1-.27-1.56,4,4,0,0,1,.27-1.56,2.12,2.12,0,0,1,.78-1A2.05,2.05,0,0,1,81,15.79a2.14,2.14,0,0,1,1.17.32,2.19,2.19,0,0,1,.78,1,4,4,0,0,1,.27,1.56A4,4,0,0,1,83,20.2a2.15,2.15,0,0,1-.78,1,2.09,2.09,0,0,1-1.17.33Zm9.27,1.63a4.07,4.07,0,0,0,2-.45,3.16,3.16,0,0,0,1.34-1.27,3.74,3.74,0,0,0,.49-2v-1.1H90.43v1.39H92.3v.13a1.88,1.88,0,0,1-.15.64l-.08.14a1.59,1.59,0,0,1-.68.63,2.32,2.32,0,0,1-1.07.23,2.09,2.09,0,0,1-1.2-.34,2.12,2.12,0,0,1-.78-1,4.43,4.43,0,0,1,0-3.1,2.16,2.16,0,0,1,.79-1,2,2,0,0,1,1.17-.33,2.29,2.29,0,0,1,.66.09,1.85,1.85,0,0,1,.53.25,1.9,1.9,0,0,1,.39.41,2,2,0,0,1,.25.55H94a3.32,3.32,0,0,0-.41-1.18,3.15,3.15,0,0,0-.81-.93,3.54,3.54,0,0,0-1.13-.61,4.39,4.39,0,0,0-1.39-.22,4.18,4.18,0,0,0-1.6.31,3.74,3.74,0,0,0-1.3.88,3.88,3.88,0,0,0-.87,1.41,5.37,5.37,0,0,0-.31,1.9A5.07,5.07,0,0,0,86.7,21a3.73,3.73,0,0,0,1.45,1.55,4.19,4.19,0,0,0,2.15.54Zm9,0a4.15,4.15,0,0,0,2.08-.53,3.78,3.78,0,0,0,1.47-1.52,5.07,5.07,0,0,0,.54-2.43,5.07,5.07,0,0,0-.54-2.43,3.74,3.74,0,0,0-1.47-1.53,4.37,4.37,0,0,0-4.17,0,3.78,3.78,0,0,0-1.46,1.53,5.07,5.07,0,0,0-.54,2.43,5,5,0,0,0,.54,2.42,3.78,3.78,0,0,0,1.46,1.53A4.16,4.16,0,0,0,99.26,23.12Zm0-1.63a2.06,2.06,0,0,1-1.17-.33,2.13,2.13,0,0,1-.77-1A4,4,0,0,1,97,18.64a4,4,0,0,1,.28-1.56,2,2,0,0,1,1.94-1.29,2.14,2.14,0,0,1,1.17.32,2.1,2.1,0,0,1,.77,1,4,4,0,0,1,.28,1.56,4,4,0,0,1-.28,1.56,2,2,0,0,1-1.94,1.29Z" filter="url(#filter_readability_kiddo)"/>
<!-- Content -->
<g opacity="0.55">
<rect x="401.44" y="15" width="37" height="7" fill="#MENU_COLOR" class="svgc_text"/>
<rect x="459.44" y="15" width="37" height="7" fill="#MENU_COLOR" class="svgc_text"/>
<rect x="517.44" y="15" width="37" height="7" fill="#MENU_COLOR" class="svgc_text"/>
<rect x="401.44" y="15" width="37" height="7" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_kiddo)"/>
<rect x="459.44" y="15" width="37" height="7" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_kiddo)"/>
<rect x="517.44" y="15" width="37" height="7" fill="#MENU_COLOR" class="svgc_text" filter="url(#filter_readability_kiddo)"/>
</g>
<!-- Menu Button -->
<rect class="svgc_text" opacity="1" x="570.15" y="8.73" width="60.06" height="19.72" rx="9.86" style="fill:none;stroke:#MENU_COLOR;stroke-miterlimit:10;stroke-width:2px"/>
<rect class="svgc_text" opacity="1" x="570.15" y="8.73" width="60.06" height="19.72" rx="9.86" style="fill:none;stroke:#MENU_COLOR;stroke-miterlimit:10;stroke-width:2px" filter="url(#filter_readability_kiddo)"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 108 KiB