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.

/* CSS placed here will be applied to all skins */

/*
* -----------------------
* Tabber
* -----------------------
*/
/* Styling for tabbers that have embeds in them */
.sfm-tabber-embeds section {
	margin-top: 16px;
}

/*
* -----------------------
* Navplate multicolumns
* -----------------------
*/
/* only on larger screens, collapse to 1 column on small screen */
@media only screen and (min-width: 640px) {
	/* Styling for 2 column divs in navplate templates */
	.sfm-navplate-columns-2 {
		column-count: 2;
	}
	/* prevent having blank line at start of col 1 and end of col 2 */
	.sfm-navplate-columns-2 ol {
		margin-top: 0;
		margin-bottom: 0;
	}
	/* prevent longer list items from spanning both cols */
	.sfm-navplate-columns-2 li {
		break-inside: avoid;
	}
}

/*
* -----------------------
* Citizen Skin
* -----------------------
*/
/* footer */
#footer-icons a {
	background-color: transparent;
	border: none;
	padding: 0;
	filter: invert(1);	
	opacity: 0.6;
	transition: opacity 250ms ease;
}
#footer-icons a:hover {
	opacity: 1;
}
#footer-icons img {
	height: 32px;
	width: auto;
}
#footer-icons ul, #footer-icons li {
	column-gap: var(--space-md);
}
/* icon color invert on dark mode */
:root.skin-theme-clientpref-night #footer-icons a {
	filter: invert(0);
}
@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os #footer-icons a {
		filter: invert(0);
	}
}

/* footer music staff */
.sfm-footer__staff {
	height: 28px;
	background-repeat: repeat-x;
	mask-image: url('/sfm/resources/img/music-staff.svg');
	-webkit-mask-image: url('/sfm/resources/img/music-staff.svg');
	mask-size: contain;
	background-color: var(--border-color-base);
}
/* hide separating line, music staff takes its place */
.citizen-footer__bottom {
	border-top: none;
}

/* 
* -----------------------
* Page Forms
* -----------------------
*/
/* multlipage edit fixes */
.pfSpreadsheet.jexcel_container {
	width: 100%;
	overflow-x: scroll;
	display: flex;
	flex-direction: column;
	max-height: calc(100svh - 53px);
}
.jexcel_content {
    width: 100%;
    overflow-x: scroll;
    flex: 1;
}