/* ==UserStyle==
@name           Image Preview Transparency Grid [Migrate Me!]
@namespace      https://userstyles.world/style/19861/image-preview-transparency-grid
@version        1.1.2
@description    This style has now migrated to UserStyles.world.
@author         BoffinBrain
@homepageURL    https://userstyles.world/style/19861/image-preview-transparency-grid
@updateURL      https://userstyles.world/api/style/19861.user.css
==/UserStyle== */

/*
I had to write the following stupid code because UserStyles.org doesn't understand the :has()
function (another reason to migrate to UserStyles.world) and I didn't want to have this message
showing up on  every single page in your browser. At least it works in Firefox.
*/

head,
meta + link + link + title:nth-child(4) {
    display: block;
    font-size: 0;
}

meta + link + link + title:nth-child(4):before,
meta + link + link + title:nth-child(4):after {
    display: block;
    background: #200;
    color: #fec;
    font-size: 1.2rem !important;
    text-align: center;
    font-family: sans-serif;
    padding: 1rem 2rem 0.3rem;
}

meta + link + link + title:nth-child(4):before {
	content: "You're using a style hosted on UserStyles.org or the USO Archive.";
}

meta + link + link + title:nth-child(4):after {
    padding: 0.3rem 2rem 1rem;
    font-size: 1rem !important;
	content: "Image Preview Transparency Grid has now migrated to UserStyles.world and has additional features! Edit this style to get the new URL, or go to your Installed Styles list and click the style's homepage link.";
}

body > img:only-child.transparent {
	background: none !important;
}

body > img:only-child.transparent:hover {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURdjY2P///wHRpHEAAAAPSURBVAjXY+BngMAPEAgAEeAD/ReYei0AAAAASUVORK5CYII=) !important;
}

/* The following line allows this global style to be uploaded to userstyles.org */
/* i really want this to be global */