MediaWiki:Common.css: Difference between revisions
>Kypho Blanked the page |
Improve mobile typography sizing |
||
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* --- Page Forms: tidy two-column layout on Minerva --- */ | |||
.skin-minerva .formtable { | |||
width: 100%; | |||
table-layout: fixed; | |||
border-collapse: separate; | |||
border-spacing: 10px 8px; | |||
} | |||
.skin-minerva .formtable th { width: 32%; text-align: left; white-space: nowrap; color:#475569; font-weight:600; } | |||
.skin-minerva .formtable td { width: 68%; } | |||
/* Default: make single inputs comfortably wide */ | |||
.skin-minerva .formtable td input[type="text"], | |||
.skin-minerva .formtable td input[type="number"], | |||
.skin-minerva .formtable td input[type="date"], | |||
.skin-minerva .formtable td textarea { | |||
width: 100%; | |||
max-width: 420px; | |||
box-sizing: border-box; | |||
} | |||
/* Inline pairs (height + active years) */ | |||
.formtable .pf-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |||
.formtable .pf-sfx { color: #64748b; } | |||
.formtable .pf-hint { color: #94a3b8; font-size: 12px; } | |||
/* Override the 100% width for inline-grouped inputs */ | |||
.skin-minerva .formtable .pf-inline input[type="number"], | |||
.skin-minerva .formtable .pf-inline input[type="text"] { | |||
width: auto !important; | |||
max-width: 6.5ch; | |||
} | |||
/* Fine-grained widths */ | |||
.formtable .w-ft, .formtable .w-in { max-width: 5ch !important; } | |||
.formtable .w-year { max-width: 6ch !important; } | |||
.mw-first-heading, | |||
.mw-page-title-main, | |||
.vector-body h1.firstHeading { | |||
font-family: "Linux Libertine", Georgia, "Times New Roman", serif; | |||
font-weight: 400; | |||
} | |||
.mw-parser-output .mw-heading2 h2, | |||
.mw-parser-output h2 { | |||
overflow: hidden; | |||
margin: 1em 0 0.25em; | |||
padding: 0 0 0.17em; | |||
border-bottom: 1px solid #a2a9b1; | |||
font-family: "Linux Libertine", Georgia, "Times New Roman", serif; | |||
font-size: 1.5em; | |||
font-weight: 400; | |||
line-height: 1.3; | |||
} | |||
.mw-parser-output .mw-heading3 h3, | |||
.mw-parser-output h3 { | |||
margin: 0.6em 0 0.3em; | |||
font-size: 1.2em; | |||
font-weight: 700; | |||
line-height: 1.4; | |||
} | |||
.mw-parser-output .mw-heading4 h4, | |||
.mw-parser-output h4 { | |||
margin: 0.5em 0 0.2em; | |||
font-size: 1em; | |||
font-weight: 700; | |||
line-height: 1.4; | |||
} | |||
.mw-parser-output .sw-generated-lead{ | |||
max-width:52em; | |||
margin:0 0 1em; | |||
padding:0; | |||
border:0; | |||
border-radius:0; | |||
background:none; | |||
box-shadow:none; | |||
color:#202122; | |||
font-size:1em; | |||
line-height:1.6; | |||
} | |||
.mw-parser-output .sw-generated-lead--tournament{ | |||
margin-top:0; | |||
} | |||
.mw-parser-output .sw-empty-state{ | |||
padding:0; | |||
border:0; | |||
border-radius:0; | |||
background:none; | |||
color:#54595d; | |||
font-style:italic; | |||
} | |||
.mw-parser-output .sw-inline-logo{ | |||
display:inline-flex; | |||
width:24px; | |||
height:24px; | |||
border-radius:999px; | |||
overflow:hidden; | |||
background:#eaecf0; | |||
vertical-align:middle; | |||
} | |||
.mw-parser-output .sw-inline-logo a, | |||
.mw-parser-output .sw-inline-logo img{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | |||
.mw-parser-output .sw-inline-logo img{ | |||
object-fit:cover; | |||
} | |||
.mw-parser-output .infobox-tournament { | |||
border: 1px solid #a2a9b1; | |||
background: #f8f9fa; | |||
} | |||
.mw-parser-output .infobox-tournament .infobox-title { | |||
background: #cedff2; | |||
} | |||
.mw-parser-output .infobox-tournament th, | |||
.mw-parser-output .infobox-tournament td { | |||
border-color: #a2a9b1; | |||
} | |||
.mw-parser-output .infobox-tournament .infobox-image, | |||
.mw-parser-output .infobox-tournament .infobox-caption, | |||
.mw-parser-output .infobox-tournament td { | |||
background: #ffffff; | |||
} | |||
@media (max-width: 720px) { | |||
.mw-first-heading, | |||
.mw-page-title-main, | |||
.vector-body h1.firstHeading { | |||
font-size: 2.05rem; | |||
line-height: 1.1; | |||
} | |||
.mw-parser-output .mw-heading2 h2, | |||
.mw-parser-output h2 { | |||
margin: 0.85em 0 0.2em; | |||
padding-bottom: 0.14em; | |||
font-size: 1.3rem; | |||
line-height: 1.25; | |||
} | |||
.mw-parser-output .mw-heading3 h3, | |||
.mw-parser-output h3 { | |||
margin: 0.55em 0 0.22em; | |||
font-size: 1.08rem; | |||
line-height: 1.3; | |||
} | |||
.mw-parser-output .mw-heading4 h4, | |||
.mw-parser-output h4 { | |||
margin: 0.45em 0 0.18em; | |||
font-size: 0.96rem; | |||
line-height: 1.3; | |||
} | |||
.mw-parser-output p, | |||
.mw-parser-output li { | |||
line-height: 1.55; | |||
} | |||
.mw-parser-output table.wikitable th, | |||
.mw-parser-output table.wikitable td { | |||
padding: 0.3em 0.45em; | |||
font-size: 0.94em; | |||
} | |||
} | |||