Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
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;
}