engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Fix RGB color filters: use pure CSS filter chains instead of SVG references

Browse source 
Chrome blocks external SVG filter references via CSS url(). Replace with
native CSS filter functions (grayscale + sepia + hue-rotate + saturate)
that work in all browsers. Delete the now-unused SVG file.
This commit is contained in:
russell@unturf.com 2026-02-15 12:25:45 -05:00
parent 9310360903
commit 6e40886cd7
2 changed files with 13 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

21
make_post_sell/static/css/common.css
View file

@ -3398,28 +3398,33 @@ textarea {
font-weight: bold;
}
/* Color filter modes — external SVG avoids DOM circular reference */
/* Color filter modes — pure CSS filter chains, no SVG needed */
html[data-color-filter="1"] {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
html[data-color-filter="2"] {
filter: url("/static/svg/color-filters.svg#cf-red");
/* Red monochrome */
filter: grayscale(100%) sepia(100%) hue-rotate(-30deg) saturate(300%);
}
html[data-color-filter="3"] {
filter: url("/static/svg/color-filters.svg#cf-green");
/* Green monochrome */
filter: grayscale(100%) sepia(100%) hue-rotate(85deg) saturate(300%);
}
html[data-color-filter="4"] {
filter: url("/static/svg/color-filters.svg#cf-blue");
/* Blue monochrome */
filter: grayscale(100%) sepia(100%) hue-rotate(200deg) saturate(300%);
}
html[data-color-filter="5"] {
filter: url("/static/svg/color-filters.svg#cf-rg");
/* Yellow (red+green) monochrome */
filter: grayscale(100%) sepia(100%) hue-rotate(25deg) saturate(300%);
}
html[data-color-filter="6"] {
filter: url("/static/svg/color-filters.svg#cf-rb");
/* Magenta (red+blue) monochrome */
filter: grayscale(100%) sepia(100%) hue-rotate(265deg) saturate(300%);
}
html[data-color-filter="7"] {
filter: url("/static/svg/color-filters.svg#cf-gb");
/* Cyan (green+blue) monochrome */
filter: grayscale(100%) sepia(100%) hue-rotate(145deg) saturate(300%);
}
/* Edit page media previews */

8
make_post_sell/static/svg/color-filters.svg
View file

@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="cf-red"><feColorMatrix type="matrix" values="1 0 0 0 0 .2126 .7152 .0722 0 0 .2126 .7152 .0722 0 0 0 0 0 1 0"/></filter>
<filter id="cf-green"><feColorMatrix type="matrix" values=".2126 .7152 .0722 0 0 0 1 0 0 0 .2126 .7152 .0722 0 0 0 0 0 1 0"/></filter>
<filter id="cf-blue"><feColorMatrix type="matrix" values=".2126 .7152 .0722 0 0 .2126 .7152 .0722 0 0 0 0 1 0 0 0 0 0 1 0"/></filter>
<filter id="cf-rg"><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 .2126 .7152 .0722 0 0 0 0 0 1 0"/></filter>
<filter id="cf-rb"><feColorMatrix type="matrix" values="1 0 0 0 0 .2126 .7152 .0722 0 0 0 0 1 0 0 0 0 0 1 0"/></filter>
<filter id="cf-gb"><feColorMatrix type="matrix" values=".2126 .7152 .0722 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 822 B