MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus DiPlanung
| Zeile 12: | Zeile 12: | ||
background: none; | background: none; | ||
display:block; | display:block; | ||
| − | + | display: flex; | |
| + | flex-wrap: wrap; | ||
width: 100%; | width: 100%; | ||
} | } | ||
.teaser-table tbody, | .teaser-table tbody, | ||
.teaser-table tr { | .teaser-table tr { | ||
| − | + | display: contents; | |
| − | |||
} | } | ||
.teaser-table th, | .teaser-table th, | ||
| Zeile 33: | Zeile 33: | ||
border-top: none; | border-top: none; | ||
} | } | ||
| + | |||
| + | /* Jede Spalte als Block behandeln */ | ||
| + | .teaser-table th:nth-child(1), | ||
| + | .teaser-table td:nth-child(1) { | ||
| + | order: 1; | ||
| + | } | ||
| + | |||
| + | .teaser-table th:nth-child(2), | ||
| + | .teaser-table td:nth-child(2) { | ||
| + | order: 2; | ||
| + | } | ||
| + | |||
| + | .teaser-table th:nth-child(3), | ||
| + | .teaser-table td:nth-child(3) { | ||
| + | order: 3; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media (max-width: 600px) { | ||
| + | |||
| + | .responsive-columns { | ||
| + | display: flex; | ||
| + | flex-wrap: wrap; | ||
| + | } | ||
| + | |||
| + | .responsive-columns tr { | ||
| + | display: contents; | ||
| + | } | ||
| + | |||
| + | .responsive-columns th, | ||
| + | .responsive-columns td { | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | /* Jede Spalte als Block behandeln */ | ||
| + | .responsive-columns th:nth-child(1), | ||
| + | .responsive-columns td:nth-child(1) { | ||
| + | order: 1; | ||
| + | } | ||
| + | |||
| + | .responsive-columns th:nth-child(2), | ||
| + | .responsive-columns td:nth-child(2) { | ||
| + | order: 2; | ||
| + | } | ||
| + | |||
| + | .responsive-columns th:nth-child(3), | ||
| + | .responsive-columns td:nth-child(3) { | ||
| + | order: 3; | ||
| + | } | ||
} | } | ||
Version vom 11. Februar 2026, 09:15 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content dt, #p-logo-text a {
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}
#p-logo-text a {font-variant: normal;}
/* Styles für Teaser-Tabellen Startseite */
@media (max-width:600px) {
.teaser-table {
padding: 0;
background: none;
display:block;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.teaser-table tbody,
.teaser-table tr {
display: contents;
}
.teaser-table th,
.teaser-table td {
display: block;
width: 100%;
}
.teaser-table tr:last-child th,
.teaser-table tr:last-child td {
margin-bottom: 1em;
}
.teaser-table tr:last-child:not(:first-child) th,
.teaser-table tr:last-child:not(:first-child) td {
border-top: none;
}
/* Jede Spalte als Block behandeln */
.teaser-table th:nth-child(1),
.teaser-table td:nth-child(1) {
order: 1;
}
.teaser-table th:nth-child(2),
.teaser-table td:nth-child(2) {
order: 2;
}
.teaser-table th:nth-child(3),
.teaser-table td:nth-child(3) {
order: 3;
}
}
@media (max-width: 600px) {
.responsive-columns {
display: flex;
flex-wrap: wrap;
}
.responsive-columns tr {
display: contents;
}
.responsive-columns th,
.responsive-columns td {
width: 100%;
}
/* Jede Spalte als Block behandeln */
.responsive-columns th:nth-child(1),
.responsive-columns td:nth-child(1) {
order: 1;
}
.responsive-columns th:nth-child(2),
.responsive-columns td:nth-child(2) {
order: 2;
}
.responsive-columns th:nth-child(3),
.responsive-columns td:nth-child(3) {
order: 3;
}
}