MediaWiki:Common.css

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* Die Definitionen werden immer durch den nächsten Kommentar unterhalb erläutert. Ein Kommentar kann sich so auch auf mehrere Definitionen darüber beziehen. */ 

.barrierefrei {
   line-height: 150%;
   max-width: 50em;
}
/* Klasse wird genutzt in den Anleitungen: In Tabellen und in den Vorlagen der Screenshots, AnleitungAbsatz und HinweisBox. Sie regelt den Zeilenabstand und beschränkt die Absatzbreite auf maximal ca. 80 Zeichen. */

.hinweisbox {
   border: solid 3px #008965;
   display: table;
   vertical-align: middle;
}
/*Formatierung der Hinweisbox: Der Rand wird in Uni-Grün gefärbt; die Kind-Elemente werden als Tabellenelemente auf gleicher Höhe gezeigt.*/

.screenshotrahmen {
   background-color: whitesmoke;
   border: solid 1px lightgray;
   padding: 5px;
}
/*Formatierung des Screenshothintergrunds: Der Hintergrund ist leicht abgedunkelt und ein Rahmen wird um das Bild gezogen. Ein kleiner Abstand nach innen wird definiert.*/

.screenshotrahmen,
.hinweisbox,
.kachel,
#toc {
   box-shadow: 5px 5px 10px 2px Silver;
}
/*Screenshots, die Kacheln der Startseite, die Seiten-Inhaltsverzeichnisse und die Hinweisboxen erhalten einen leichten grauen Schatten.*/

.noautonum .tocnumber {
   display: none;
}
/* Wird benötigt, um im Inhaltsverzeichnis die Nummerierung zu unterdrücken. */

.wikitable > .tanleitung {
   background-color: #008965 !important;
   color: white;
}
/* In Tabellen der Anleitungen wird die Definition genutzt, um der Tabellenkopfzeile eine Uni-grünen Hintergrund und die Schriftfarbe auf weiß zu setzen. */

#mw-subcategories + #mw-pages > h2, 
.mw-parser-output:has(> :last-child) + .mw-category-generated, /* Auf einer Kategorienseite haben die automatisch erzeugten Überschriften (Unterkategorien und Seiten in Kategorie) ebenfalls einen größeren Abstand, wenn es einen entsprechenden Seiteninhalt gibt. */
.screenshot + h2,
.screenshot + h3,
.absatz + h2,
.absatz + h3,
.hinweisbox + h2,
.hinweisbox + h3 {
  margin-top: 2em !important;
}

/* größerer Zeilenabstand über den Überschriften */

.hinweisbox + .absatz,
.absatz + .hinweisbox,
.hinweisbox + .screenshot,
.screenshot + .hinweisbox,
.hinweisbox + #toc,
.hinweisbox + .hinweisbox {
   margin-top: 2em;
}
/* Zeilenabstand der Hinweisbox */

.screenshot + .absatz,
.absatz + .screenshot,
.screenshot + .seitenindex,
.absatz + .seitenindex,
.screenshot + #toc {
   margin-top: 1.5em;
}
/* größerer Abstand zwischen zwischen Screenshot, Absatz und Inhaltsverzeichnis */

.seitenindex {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
   grid-auto-flow: dense;
   column-gap: 2em;
   row-gap: 1.5em;
}
/* Anzeige der Kacheln im Seitenindex (wird auf der Startseite verwendet): Die Kacheln haben eine minimale Breite. Außerdem wurde der Platz zwischen den Kacheln definiert (c.-gap und r.-gap). Wenn nicht mehr genügend Platz für eine weitere Kachel zur Verfügung steht, wird diese in eine neue Zeile geschoben. So werden die Kacheln auf kleineren Displays untereinander gezeigt.*/

.kachel {
   text-align: center;
   border-top: solid 2px darkgray;
   border-left: solid 2px darkgray;
   border-right: solid 2px gray;
   border-bottom: solid 2px gray;
   background-color: gainsboro;
}
/* Eigenschaften der Kacheln im Seitenindex */

.kachel:hover {
   background-color: lightgrey;
   box-shadow: 5px 5px 5px 0px #a7d7f9;
   border-top-color: LightSteelBlue;
   border-left-color: LightSteelBlue;
   border-right-color: SteelBlue;
   border-bottom-color: SteelBlue;
}
/* Eine Kachel im Seitenindex wird hervorgehoben wenn der Mauszeiger sich darüber befindet */

/* nav#p-tb {
   display: none;
} */
/* Unterdrückt die Anzeige der Werkzeuge im Seitenmenü komplett */

li#t-recentchangeslinked,
li#t-upload,
li#t-specialpages,
li#t-permalink,
li#t-info,
li#t-cite {
   display: none;
}
/* Einzelne Werkzeuge im linken Seitenmenü werden ausgeblendet */

.kachel,
#mw-panel a {
   transition: all 1s;
}

/* Der Farbübergang des Seitenmenü und der Kacheln im Seitenindex wird nicht sofort durchgeführt, sondern braucht eine Sekunde. */

#mw-panel a:hover {
   box-shadow: 0px 5px 5px -2px Silver;
}
/* Hervorhebung im linken Seitenmenü der ausgewählten Menüzeile */