MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.vector-page-toolbar {
	position: relative;
	z-index: 100;
}

.transit-infobox {
	float: right;
	width: 22em;
	margin: 0 0 1em 1.5em;
	border: 1px solid #a2a9b1;
	border-collapse: collapse;
	background: var(--background-color-base, transparent);
	font-size: 88%;
	line-height: 1.45;
}

html:not(.ve-active) .mw-parser-output > .transit-infobox + p {
	position: relative;
	top: -5.75em;
}

html:not(.ve-active) .mw-parser-output > .transit-infobox + p + p {
	margin-top: -3.2em;
}

.transit-infobox th,
.transit-infobox td {
	padding: 0.3em 0.55em;
	vertical-align: top;
	border: 0;
}

.transit-infobox > tbody > tr > th:not([colspan]) {
	width: 42%;
	text-align: left;
	font-weight: bold;
}

.transit-infobox-title {
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	line-height: 1.25;
	padding: 0.65em 0.55em !important;
}

.transit-infobox-section {
	text-align: center;
	font-weight: bold;
	font-size: 105%;
	background: rgba(127, 127, 127, 0.18);
	border-top: 1px solid #a2a9b1 !important;
	border-bottom: 1px solid #a2a9b1 !important;
	padding: 0.3em 0.5em !important;
}

.transit-infobox-image {
	text-align: center;
	padding: 0.7em !important;
}

.transit-infobox-image img {
	max-width: 100%;
	height: auto;
}

.transit-infobox-caption {
	margin-top: 0.3em;
	font-size: 90%;
	line-height: 1.3;
	text-align: center;
}

.transit-route-map {
	padding: 0.5em 0.35em !important;
	text-align: left;
}

.transit-route-map table {
	max-width: 100%;
}

.transit-line-infobox {
	width: 22em;
}

.transit-infobox td,
.transit-infobox th {
	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* =========================================================
   ROUTEMAP / BSICON COLOR FIX
   Preserve the original semantic colors of BSicon SVGs.
   ========================================================= */

.transit-route-map img,
.routemap img,
[class*="routemap"] img {
	filter: none !important;
	-webkit-filter: none !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
}

/* Vector 2022 forced dark mode */
html.skin-theme-clientpref-night .transit-route-map img,
html.skin-theme-clientpref-night .routemap img,
html.skin-theme-clientpref-night [class*="routemap"] img {
	filter: none !important;
	-webkit-filter: none !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
}

/* Vector 2022 automatic dark mode */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .transit-route-map img,
	html.skin-theme-clientpref-os .routemap img,
	html.skin-theme-clientpref-os [class*="routemap"] img {
		filter: none !important;
		-webkit-filter: none !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 720px) {
	html:not(.ve-active) .mw-parser-output > .transit-infobox + p {
		position: static;
		top: auto;
	}

	html:not(.ve-active) .mw-parser-output > .transit-infobox + p + p {
		margin-top: initial;
	}

	.transit-infobox {
		float: none;
		width: auto;
		max-width: 32em;
		margin: 1em auto;
	}

	.transit-line-infobox {
		width: auto;
	}
}