Oct
9
2021

[GreaseMonkey] Better Pixel Art viewer for itch.io

An article by mgear

Default itch.io image viewer is horrible for small pixel art, so here is Firefox Greasemonkey plugin to make the viewer full screen and use pixel scaling.

	// ==UserScript==
	// @name itch.io full screen image viewer
	// @namespace https://unitycoder.com
	// @description better image viewer lightbox for pixel art images
	// @version 1.0
	// @include https://.itch.io/
	// @grant none
	// @run-at document-start
	// ==/UserScript==

	// http://greasemonkey.win-start.de/patterns/add-css.html
	function addGlobalStyle(css)
	{
	var head, style;
	head = document.getElementsByTagName('head')[0];
	if (!head) { return; }
	style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = css;
	head.appendChild(style);
	}

	// set custom styles for these elements
	addGlobalStyle('#lightbox_container .lightbox.screenshot_lightbox.animated { width:100%; height:100%;}');
	addGlobalStyle('.lightbox.screenshot_lightbox .screenshot_container { width:100%; height:100%;display: flex;}');
	addGlobalStyle('.lightbox.screenshot_lightbox .screenshot_container .lb_screenshot { width:100%; height:auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges; object-fit:contain;}');
	addGlobalStyle('body.lightbox_open { overflow:auto; !important;}');