MediaWiki:Common.css

Aus DiPlanung

Hinweis: Leere nach dem Speichern 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
  • Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
  • Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.
/* 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;
		border: none;
		display: flex;
		width: 100%;
	}
	.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;
  }
}