MediaWiki:Common.css: Difference between revisions

From ProtoFab
Jump to navigation Jump to search
Content deleted Content added
No edit summary
No edit summary
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */

/* Keep header and page clean */
/* Keep header and page clean */
.mw-page-container {
.mw-page-container {
Line 14: Line 15:
line-height: 1.6;
line-height: 1.6;
}
}



/* Clean tables */
/* Clean tables */
Line 27: Line 27:
}
}


/* Make general content safer on small screens */
img,
video,
iframe {
max-width: 100%;
height: auto;
}

pre,
code {
overflow-x: auto;
}


/* Mobile layout */
/* Mobile layout */
@media (max-width: 768px) {
@media (max-width: 768px) {
/* Reduce large title/banner padding */
/* Reduce page side padding */
.mw-body,
.vector-body {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}

/* Welcome banner */
.mainpage-banner {
.mainpage-banner {
width: 100% !important;
box-sizing: border-box;
padding: 1rem !important;
padding: 1rem !important;
font-size: 1.5rem !important;
font-size: 1.5rem !important;
line-height: 1.4 !important;
text-align: center;
text-align: center;
}
}


/* Stack top quick links vertically */
/* Top quick links table must stop behaving like a table */
.mainpage-links,
.mainpage-links tbody,
.mainpage-links tr {
display: block !important;
width: 100% !important;
}

.mainpage-links td,
.mainpage-links td,
.mainpage-links th {
.mainpage-links th {
display: block;
display: block !important;
width: 100% !important;
width: 100% !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid #a2a9b1;
box-sizing: border-box;
box-sizing: border-box;
text-align: center;
text-align: center;
padding: 1rem 0.75rem !important;
padding: 1rem 0.75rem !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid #a2a9b1 !important;
white-space: normal !important;
}
}


.mainpage-links tr:first-child td:first-child,
.mainpage-links tr:first-child td:first-child,
.mainpage-links tr:first-child th:first-child {
.mainpage-links tr:first-child th:first-child {
border-top: none;
border-top: none !important;
}

/* Main section table must also stop behaving like a table */
.mainpage-sections,
.mainpage-sections tbody,
.mainpage-sections tr {
display: block !important;
width: 100% !important;
}
}


/* Stack homepage content columns */
.mainpage-sections td,
.mainpage-sections td,
.mainpage-sections th {
.mainpage-sections th {
display: block;
display: block !important;
width: 100% !important;
width: 100% !important;
white-space: normal;
box-sizing: border-box;
box-sizing: border-box;
padding: 0.9rem !important;
white-space: normal !important;
border-left: none !important;
border-right: none !important;
}
}


.mainpage-sections th {
/* Reduce page side padding */
text-align: center;
.mw-body,
font-size: 1.1rem;
.vector-body {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}


/* Allow list links to wrap naturally */
/* Let long links wrap normally */
.mainpage-sections a {
.mainpage-sections a,
.mainpage-links a {
white-space: normal;
white-space: normal !important;
word-break: break-word;
word-break: break-word;
}

/* Optional: make normal wikitable content scroll instead of crushing */
.wikitable {
display: block;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
}
}
}

Revision as of 15:41, 7 April 2026

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

/* Keep header and page clean */
.mw-page-container {
	max-width: 100%;
}

.vector-header-container,
.vector-sticky-header-container {
	border-bottom: 1px solid #eaecf0;
}

.mw-body {
	font-size: 0.98rem;
	line-height: 1.6;
}

/* Clean tables */
.wikitable {
	font-size: 0.95rem;
	border-collapse: collapse;
}

.wikitable th,
.wikitable td {
	padding: 0.5em 0.75em;
}

/* Make general content safer on small screens */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

pre,
code {
	overflow-x: auto;
}

/* Mobile layout */
@media (max-width: 768px) {
	/* Reduce page side padding */
	.mw-body,
	.vector-body {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	/* Welcome banner */
	.mainpage-banner {
		width: 100% !important;
		box-sizing: border-box;
		padding: 1rem !important;
		font-size: 1.5rem !important;
		line-height: 1.4 !important;
		text-align: center;
	}

	/* Top quick links table must stop behaving like a table */
	.mainpage-links,
	.mainpage-links tbody,
	.mainpage-links tr {
		display: block !important;
		width: 100% !important;
	}

	.mainpage-links td,
	.mainpage-links th {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
		text-align: center;
		padding: 1rem 0.75rem !important;
		border-left: none !important;
		border-right: none !important;
		border-top: 1px solid #a2a9b1 !important;
		white-space: normal !important;
	}

	.mainpage-links tr:first-child td:first-child,
	.mainpage-links tr:first-child th:first-child {
		border-top: none !important;
	}

	/* Main section table must also stop behaving like a table */
	.mainpage-sections,
	.mainpage-sections tbody,
	.mainpage-sections tr {
		display: block !important;
		width: 100% !important;
	}

	.mainpage-sections td,
	.mainpage-sections th {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
		padding: 0.9rem !important;
		white-space: normal !important;
		border-left: none !important;
		border-right: none !important;
	}

	.mainpage-sections th {
		text-align: center;
		font-size: 1.1rem;
	}

	/* Let long links wrap normally */
	.mainpage-sections a,
	.mainpage-links a {
		white-space: normal !important;
		word-break: break-word;
	}

	/* Optional: make normal wikitable content scroll instead of crushing */
	.wikitable {
		display: block;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}
}