Custom CSS

Source: https://w9p.co/userscripts/mpiv/css.html (which will shut down on January 31st 2021).

---

• Mouseover Popup Image Viewer
• Custom CSS
• Custom Host Rules
• Changelog

General

Use the "Custom CSS" text field in the settings dialog to modify MPIV's appearance using CSS. You can also use it to temporarily hide interfering page content since what you write there will only be used when MPIV is active.

The following table lists all IDs and classes available:

Element	Selector
Popup (image or video element)	#mpiv-popup
Popup while being visible	#mpiv-popup.mpiv-show
Popup while zoom factor is being changed (until CSS transition ends)	#mpiv-popup.mpiv-zooming
Bar (div element)	#mpiv-bar
Bar while being visible	#mpiv-bar.mpiv-show
Bar while showing gallery info	#mpiv-bar.mpiv-gallery
Bar while showing error message	#mpiv-bar.mpiv-error
Bar while showing HTML tooltip	#mpiv-bar.mpiv-tooltip
Bar while showing caption (parsed by host rule property "c")	#mpiv-bar.mpiv-caption
Bar while showing progress (video buffer, anti-hotlinking)	#mpiv-bar.mpiv-xhr
Page while image is being loaded	html.mpiv-loading
Page while image is being displayed down-scaled	html.mpiv-large
Page while manual popup activation is possible	html.mpiv-ready

Examples

Borderless popup:

#mpiv-popup { border:none; }

Red border with rounded corners if popup contains HTML5 video:

#mpiv-popup[autoplay] { border:3px solid darkred; border-radius:10px; }

Fade-in animation:

#mpiv-popup { display:inline; opacity:0; transition:opacity 500ms; }#mpiv-popup.mpiv-show { opacity:1; }

Info box in bottom right corner, black on white, no delayed animation:

#mpiv-bar { left:auto; top:auto; bottom:0; background:white; color:black; transition:none; }

No HTML tooltips on example.com and example.org (Firefox only):

@-moz-document domain(example.com), domain(example.org) {#mpiv-bar.mpiv-tooltip { display:none; }}

Never hide mouse cursor:

html:not(.mpiv-large) #mpiv-popup { cursor:default!important }