MediaWiki:Common.css: Difference between revisions
Appearance
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;
}
}