MediaWiki:Gadget-dewikiResponsive.css
Zur Navigation springen
Zur Suche springen
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-width: 720px) {
/*
* float aufheben und flexibel auf volle Seitenbreite bringen,
* zusätzlich etwaige Seitenabstände anpassen
*/
body.skin--responsive :is(.infobox, .dewiki-unfloat) {
display: flex;
flex: 1 1 100%;
flex-flow: column nowrap;
position: relative;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 2em;
width: 100% !important;
max-width: 100% !important;
}
/*
* Tabellenzeilen auf volle Breite, Zellen per Flexbox anordnen
*/
body.skin--responsive :is(.infobox, .dewiki-unfloat) > tbody > tr {
min-width: 100%;
display: flex;
flex-flow: row nowrap;
}
/*
* "shrink" für Zellelemente deaktivieren
*/
body.skin--responsive :is(.infobox, .dewiki-unfloat) tbody > tr > :is(th, td) {
flex: 1 0;
}
/*
* innerhalb des Tabellenkörpers und der Beschriftung die Elemente untereinander anordnen
*/
body.skin--responsive :is(.infobox, .dewiki-unfloat) > :is(tbody, caption) {
display: flex;
flex-flow: column nowrap;
}
/*
* gibt es nur ein Zellemenent, dieses auf volle Breite ausdehnen
*/
body.skin--responsive :is(.infobox, .dewiki-unfloat) :is(th:only-child, td:only-child) {
width: 100%;
}
/*
* 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, .dewiki-unfloat) {
border-width: 1px 0 0 1px;
}
body.skin--responsive .wikitable:is(.infobox, .dewiki-unfloat) :is(th, td) {
border-width: 0 1px 1px 0;
}
/*
* Entfernen des äußeren Randes in wikitables dann wieder aufheben
*/
body.skin--responsive .wikitable:is(.infobox, .dewiki-unfloat) {
border-top: 1px solid var(--border-color-base, #a2a9b1);
border-left: 1px solid var(--border-color-base, #a2a9b1);
}
}