Jump to content

MediaWiki:Common.css: Difference between revisions

From PentaLatin
Mobile: keep infoboxes as full-width tables on narrow screens
Mobile: stack the upload form on narrow screens
 
(One intermediate revision by the same user not shown)
Line 44: Line 44:
display: table;
display: table;
max-width: 100%;
max-width: 100%;
}
/* Phase 7 mobile fix (2026-11-12). The "File history" table on File: pages sits outside
  the article text, so Vector's own "scroll wide tables sideways" rule doesn't cover it;
  on a phone its last columns were cut off with no way to scroll to them. Same treatment
  as Vector's rule, same breakpoint. */
@media (max-width: 639px) {
table.filehistory {
display: block;
overflow-x: auto;
max-width: 100%;
}
}
/* Phase 7 mobile fix (2026-11-12). Special:Upload's form is a label|field table with a
  60-character filename box and an 80-column summary box, which forced the page to
  ~550px on a 375px phone. On narrow screens: stack each label above its field, cap the
  fields at the screen width, and let the long [[File:...]] code examples wrap. */
@media (max-width: 639px) {
.mw-special-Upload #mw-upload-form table,
.mw-special-Upload #mw-upload-form tbody,
.mw-special-Upload #mw-upload-form tr,
.mw-special-Upload #mw-upload-form td {
display: block;
width: auto;
text-align: left;
}
.mw-special-Upload #mw-upload-form input[type="text"],
.mw-special-Upload #mw-upload-form input:not([type]), /* wpDestFile has no type attribute */
.mw-special-Upload #mw-upload-form textarea,
.mw-special-Upload #mw-upload-form select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Fieldsets default to min-width: min-content and refuse to shrink. */
.mw-special-Upload #mw-upload-form fieldset {
min-width: 0;
}
.mw-special-Upload #mw-content-text code {
overflow-wrap: anywhere;
}
}
}

Latest revision as of 03:24, 13 November 2026

/* PentaLatin Phase 2 placeholder branding.
   Simple warm terracotta/cream palette, no dark-mode handling yet (deferred
   until real branding assets/logo are chosen). Safe to replace wholesale later. */

:root {
	--pentalatin-primary: #B2472F;
	--pentalatin-primary-dark: #7A2E22;
	--pentalatin-cream: #F7F1E6;
}

body {
	background-color: var( --pentalatin-cream );
}

.mw-body,
.vector-body {
	background-color: #ffffff;
}

.vector-header-container,
.vector-header {
	background-color: var( --pentalatin-cream );
}

#firstHeading,
.firstHeading {
	font-family: Georgia, 'Times New Roman', serif;
	color: var( --pentalatin-primary-dark );
}

a {
	color: var( --pentalatin-primary );
}

a:visited {
	color: var( --pentalatin-primary-dark );
}

/* Phase 7 mobile fix (2026-11-12). With $wgVectorResponsive on, Vector turns content
   tables into scrollable blocks on narrow screens (display:block). Our infoboxes have a
   fixed 300px width, so the inner table shrank to its content and the red title bar
   stopped short. Keep infoboxes as real tables, never wider than the screen. */
.mw-parser-output table.infobox {
	display: table;
	max-width: 100%;
}

/* Phase 7 mobile fix (2026-11-12). The "File history" table on File: pages sits outside
   the article text, so Vector's own "scroll wide tables sideways" rule doesn't cover it;
   on a phone its last columns were cut off with no way to scroll to them. Same treatment
   as Vector's rule, same breakpoint. */
@media (max-width: 639px) {
	table.filehistory {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}

/* Phase 7 mobile fix (2026-11-12). Special:Upload's form is a label|field table with a
   60-character filename box and an 80-column summary box, which forced the page to
   ~550px on a 375px phone. On narrow screens: stack each label above its field, cap the
   fields at the screen width, and let the long [[File:...]] code examples wrap. */
@media (max-width: 639px) {
	.mw-special-Upload #mw-upload-form table,
	.mw-special-Upload #mw-upload-form tbody,
	.mw-special-Upload #mw-upload-form tr,
	.mw-special-Upload #mw-upload-form td {
		display: block;
		width: auto;
		text-align: left;
	}
	.mw-special-Upload #mw-upload-form input[type="text"],
	.mw-special-Upload #mw-upload-form input:not([type]), /* wpDestFile has no type attribute */
	.mw-special-Upload #mw-upload-form textarea,
	.mw-special-Upload #mw-upload-form select {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Fieldsets default to min-width: min-content and refuse to shrink. */
	.mw-special-Upload #mw-upload-form fieldset {
		min-width: 0;
	}
	.mw-special-Upload #mw-content-text code {
		overflow-wrap: anywhere;
	}
}