Template:Infobox application/styles.css

/* Colors come from --ia-accent / --ia-bg custom properties set inline by the
   template (see Template:Infobox_application `color=` / `bg=` params) so each
   page can theme its own infobox around its own images. The var() fallbacks
   below are what you get if a page doesn't set them -- the original orange/
   dark-brown look. */

.infobox-application {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1em 1em;
	background-color: var(--ia-bg, #2a0f00);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	font-size: 88%;
	line-height: 1.4;
}

.infobox-application__title {
	background-color: #1a0a00;
	color: var(--ia-accent, #F19000);
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	padding: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px 4px 0 0;
}

.infobox-application__image {
	text-align: center;
	padding: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.infobox-application__image img {
	max-width: 100%;
}

.infobox-application__caption {
	font-style: italic;
	color: #D5D4D4;
	font-size: 90%;
	text-align: center;
	padding: 4px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.infobox-application__row {
	display: flex;
	padding: 4px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.infobox-application__row:last-child {
	border-bottom: none;
}

.infobox-application__label {
	color: var(--ia-accent, #F19000);
	font-weight: bold;
	width: 40%;
	flex-shrink: 0;
	padding-right: 6px;
}

.infobox-application__value {
	color: #D5D4D4;
	width: 60%;
}

/* --- Multi-image tabbed gallery (image1/caption1, image2/caption2, ...) --- */
.infobox-application__gallery-tabs {
	display: flex;
	overflow-x: auto;
	background-color: var(--ia-accent, #F19000);
}

.infobox-application__gallery-tab {
	flex: 0 0 auto;
	color: #1a0a00;
	font-weight: bold;
	font-size: 90%;
	padding: 8px 10px;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	user-select: none;
}

.infobox-application__gallery-tab.is-active {
	background-color: rgba(0, 0, 0, 0.2);
	border-bottom-color: #1a0a00;
}

.infobox-application__gallery-tab:hover {
	background-color: rgba(0, 0, 0, 0.12);
}

.infobox-application__gallery-slide {
	text-align: center;
	padding: 8px;
}

/* A plain "hidden" attribute gets stripped by MediaWiki's HTML sanitizer
   (not on its allowlist for div), so visibility is tracked with this class
   instead -- toggled by MediaWiki:Common.js. */
.infobox-application__gallery-slide.is-inactive {
	display: none;
}

.infobox-application__gallery-slide img {
	max-width: 100%;
}

.infobox-application__gallery-caption {
	font-style: italic;
	color: #D5D4D4;
	font-size: 90%;
	text-align: center;
	padding: 0 8px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Below this, a 300px fixed-width float leaves almost no room for the
   article text beside it (down to a single-character-wide column on a
   phone) -- drop the float and let the box take the full column width. */
@media screen and (max-width: 550px) {
	.infobox-application {
		float: none;
		clear: both;
		width: auto;
		margin: 0 0 1em 0;
	}
}