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 }