MediaWiki:Common.css: Difference between revisions

>Kypho
Created page with "Spike Wiki – Page Forms polish: .pfwrap { max-width: 920px; } .formtable { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:10px 8px; } .formtable th { width: 200px; text-align:left; white-space:nowrap; color:#475569; font-weight:600; } .formtable td input[type="text"], .formtable td input[type="number"], .formtable td input[type="date"] { width: 100%; max-width: 360px; } .pf-inline { display:inline-flex; align-items:center; gap:8px; }"
 
Improve mobile typography sizing
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Spike Wiki – Page Forms polish */
/* --- Page Forms: tidy two-column layout on Minerva --- */
.pfwrap { max-width: 920px; }
.skin-minerva .formtable {
.formtable { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:10px 8px; }
  width: 100%;
.formtable th { width: 200px; text-align:left; white-space:nowrap; color:#475569; font-weight:600; }
  table-layout: fixed;
.formtable td input[type="text"],
  border-collapse: separate;
.formtable td input[type="number"],
  border-spacing: 10px 8px;
.formtable td input[type="date"] { width: 100%; max-width: 360px; }
}
.pf-inline { display:inline-flex; align-items:center; gap: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;
  }
}