dev

Note: After publishing, you may have to bypass your browser's cache to see the changes.

img {
	/* Set of blend modes to compositing images. */
	--img-color: color;
	--img-color-burn: color-burn;
	--img-color-dodge: color-dodge;
	--img-darken: darken;
	--img-difference: difference;
	--img-exclusion: exclusion;
	--img-hard-light: hard-light;
	--img-hue: hue;
	--img-lighten: lighten;
	--img-luminosity: luminosity;
	--img-multiply: multiply;
	--img-overlay: overlay;
	--img-plus: plus-lighter;
	--img-saturation: saturation;
	--img-screen: screen;
	--img-soft-light: soft-light;
	
	/* Filter preset parameters */
	--img-zero: 0;
	--img-glow: 0.35;
	--img-one: 1;
}

/* Set image blending parameters by filename attribute */
img[src*="_%3Bbl-add"]
{
	mix-blend-mode: var(--img-plus);
}

img[src*="_%3Bbl-col"]
{
	mix-blend-mode: var(--img-color);
}

img[src*="_%3Bbl-cb"]
{
	mix-blend-mode: var(--img-color-burn);
}

img[src*="_%3Bbl-cd"]
{
	mix-blend-mode: var(--img-color-dodge);
}

img[src*="_%3Bbl-dark"]
{
	mix-blend-mode: var(--img-darken);
}

img[src*="_%3Bbl-div"]
{
	mix-blend-mode: var(--img-color-dodge);
	filter: invert(var(--img-one));
}

img[src*="_%3Bbl-diff"]
{
	mix-blend-mode: var(--img-difference);
}

img[src*="_%3Bbl-ex"]
{
	mix-blend-mode: var(--img-exclusion);
}

img[src*="_%3Bbl-hard"]
{
	mix-blend-mode: var(--img-hard-light);
}

img[src*="_%3Bbl-hue"]
{
	mix-blend-mode: var(--img-hue);
}

img[src*="_%3Bbl-li"]
{
	mix-blend-mode: var(--img-lighten);
}

img[src*="_%3Bbl-lum"]
{
	mix-blend-mode: var(--img-luminosity);
}

img[src*="_%3Bbl-mul"]
{
	mix-blend-mode: var(--img-multiply);
}

img[src*="_%3Bbl-ovl"]
{
	mix-blend-mode: var(--img-overlay);
}

img[src*="_%3Bbl-sat"]
{
	mix-blend-mode: var(--img-saturation);
}

img[src*="_%3Bbl-scr"]
{
	mix-blend-mode: var(--img-screen);
}

img[src*="_%3Bbl-soft"]
{
	mix-blend-mode: var(--img-soft-light);
}

/* Preset image filters for UCP light/dark theming. */

/* Recommended for fully black or white graphics */
.theme-fandomdesktop-dark img[src*="_%3Bf-inv-d"]
{
	filter: invert(var(--img-one));
}

.theme-fandomdesktop-light img[src*="_%3Bf-inv-l"]
{
	filter: invert(var(--img-one));
}

.theme-fandommobile-dark img[src*="_%3Bf-inv-d"]
{
	filter: invert(var(--img-one));
}

.theme-fandomdesktop-light img[src*="_%3Bf-inv-l"]
{
	filter: invert(var(--img-one));
}

/* Glowing/Light graphics */
.theme-fandomdesktop-light img[src*="_%3Bf-light"]
{
	filter: unset;
	opacity: var(--img-glow);
}

.theme-fandommobile-light img[src*="_%3Bf-light"]
{
	filter: unset;
	opacity: var(--img-glow);
}

/* Remove effects for certain cases */
.filehistory img {
    filter: revert !important;
    mix-blend-mode: revert !important;
    opacity: revert !important;
}

#file img:hover {
    filter: revert !important;
    mix-blend-mode: revert !important;
    opacity: revert !important;
}