MediaWiki:Gadget-dewikiResponsive.css
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/*
* Lokale Adaption des "infobox"-Hack-Stylesheets aus WikimediaMessages:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikimediaMessages/+/refs/heads/master/modules/ext.wikimediamessages.styles/infobox.less
* reduziert um Definitionen, die sich nicht auf die responsive Darstellung beziehen
*/
@media all and ( /* max-mobile */ max-width: 639px ) {
/*
* float aufheben und flexibel auf volle Seitenbreite bringen,
* zusätzlich etwaige Seitenabstände anpassen
*/
body.skin--responsive :is( .infobox, .responsive-mobile-full ) {
position: relative;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 2em;
width: 100% !important;
max-width: 100% !important;
}
/*
* innerhalb eines Tabellenkörpers oder Tabellenbeschriftung die Elemente
* untereinander anordnen
*/
body.skin--responsive :is( .infobox, .responsive-mobile-full ) > :is( tbody, caption ) {
display: flex;
flex-flow: column nowrap;
}
/*
* Tabellenzeilen auf volle Breite, Zellen per Flexbox anordnen
*/
body.skin--responsive :is( .infobox, .responsive-mobile-full ) > tbody > tr {
min-width: 100%;
display: flex;
flex-flow: row nowrap;
}
/*
* "shrink" für Zellelemente deaktivieren
*/
body.skin--responsive :is( .infobox, .responsive-mobile-full ) tbody > tr > :is( th, td ) {
flex: 1 0;
}
/*
* gibt es nur ein Zellemenent, dieses auf volle Breite ausdehnen
*/
body.skin--responsive :is( .infobox, .responsive-mobile-full ) :is( th:only-child, td:only-child ) {
width: 100%;
}
/*
* Tabellen innerhalb von Infobox-Tabellen nicht als Block darstellen; die
* Responsivität wird bereits von der äußeren Infobox-Tabelle gewährleistet.
*/
body.skin--responsive table:is( .infobox, .responsive-mobile-full ) table {
display: inline-table;
}
/*
* border-collapse bei wikitables mit Flex-Zellen simulieren, es erscheint
* sonst ein doppelter Rahmen zwischen der Tabelle und ihren Zellen
*/
body.skin--responsive .wikitable:is( .infobox, .responsive-mobile-full ) {
border-top: 1px solid var(--border-color-base, #a2a9b1);
border-left: 1px solid var(--border-color-base, #a2a9b1);
}
body.skin--responsive .wikitable:is( .infobox, .responsive-mobile-full ) :is( th, td ) {
border-width: 0 1px 1px 0;
}
}