MediaWiki:Common.css: verschil tussen versies

Versie van 2 nov 2025 20:54

/** CSS die hier wordt geplaatst heeft invloed op alle vormgevingen */

/* 1) Basis: appendix moet niet tegen floats aanbotsen */
.mw-parser-output .appendix-box {
  clear: both;            /* onder content + thumbnails */
  margin-top: 1em;
  box-sizing: border-box;
  /* standaard: geen rechtermarge */
  --appendix-rightcol: 320px;  /* pas aan als je infobox breder/smaller is */
}

/* 2) Fallback die in alle browsers werkt:
      als er EERDER op de pagina een rechterkolom staat, geef appendix marge rechts */
.mw-parser-output .infobox ~ .appendix-box,
.mw-parser-output .floatright ~ .appendix-box,
.mw-parser-output .thumb.tright ~ .appendix-box,
.mw-parser-output table[style*="float:right"] ~ .appendix-box,
.mw-parser-output div[style*="float:right"] ~ .appendix-box {
  margin-right: var(--appendix-rightcol) !important;
}

/* 3) Nettere (optionele) variant voor moderne browsers met :has()
      — mag naast de fallback blijven staan */
@supports selector(.mw-parser-output:has(.infobox)) {
  .mw-parser-output:has(.infobox, .floatright, .thumb.tright) .appendix-box {
    margin-right: var(--appendix-rightcol);
  }
}

/* 4) Mobiel: kolommen stapelen, dus marge rechts uit */
@media (max-width: 1000px) {
  .mw-parser-output .appendix-box { margin-right: 0 !important; }
}


/* Fallback voor oudere browsers zonder :has() */
.mw-parser-output .infobox ~ .appendix-box,
.mw-parser-output .floatright ~ .appendix-box,
.mw-parser-output .thumb.tright ~ .appendix-box,
.mw-parser-output .sidebar ~ .appendix-box {
  margin-right: var(--appendix-rightcol, 320px);
}

/* Op mobiel geen extra marge */
@media (max-width: 1000px) {
  .appendix-box {
    margin-right: 0 !important;
  }
}