<span class="mw-page-title-namespace">Template</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Pan/styles.css</span>
Fabrice P. Lauss𝕪’s ℤetetic Web
/* [[Template:Pan]] 1.4: a wide picture at a chosen height, scrolled sideways.

   The box spans the whole white area, bleeding through the 20px padding of
   .mw-body as .lw-full and .yt-full do; overflow-x makes it scroll instead of
   pushing the page sideways. line-height:0 removes the descender gap an
   inline picture would leave under itself. */
.lw-pan {
	margin: 0.6em -20px;
	overflow-x: auto;
	overflow-y: hidden;
	line-height: 0;
}

/* width:max-content with auto margins centres a picture narrower than the
   box and resolves to 0 when it is wider, so it then starts at the left
   edge and overflows to the right, where the scrollbar can reach it. The
   second span is the picture's own when tip= has wrapped it in a <wz>. */
.lw-pan > span,
.lw-pan > span > span {
	display: block;
	width: max-content;
	margin: 0 auto;
}

.lw-pan a {
	display: block;
}

/* The skin caps every picture at calc(100% + 40px) of the text column, which
   would shrink it back into the box and leave nothing to scroll; and `a img`
   insets linked pictures by 2px. */
.lw-pan img {
	display: block;
	max-width: none;
	padding: 0;
}

.lw-pan:focus {
	outline: 2px solid #246B47;
	outline-offset: -2px;
}

.lw-pan-caption {
	margin-top: -0.3em;
	text-align: center;
	font-size: 0.9em;
	color: #54595d;
}

/* The margin word and its tooltip: hidden here, and brought out by
   MediaWiki:Gadget-pan.css only where the gadget runs and the margin has
   room for it. */
.lw-pan-label {
	display: none;
}