|
|
| Regel 1: |
Regel 1: |
| /** CSS die hier wordt geplaatst heeft invloed op alle vormgevingen */ | | /** 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;
| |
| }
| |
| }
| |
