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. */ 

.mw-parser-output > .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 {
   display: table;
   vertical-align: middle;
   margin-top: 2em;
   min-height: 64px;
}

.mw-parser-output > .hinweisbox {
   width: 100%;
}

.hinweisbox:not(:last-child) {
   margin-bottom: 2em;
}

.hinweisbox > div {
   padding: 0 5px;
   display: table-cell;
   vertical-align: middle;
}
/* Formatierung der Hinweisbox:
   Die Darstellung erfolgt als Tabelle;
   Über der Hinweisbox wird immer ein Abstand eingefügt; Wenn die Hinweisbox nicht das letzte Element einer Seite ist, erhält sie auch einen Abstand nach unten;
   Die Hinweisbox hat eine Mindesthöhe, die der Höhe der Symbolbilder entspricht. So werden auch kleine Boxen ohne Symbolbild passend dargestellt;
   Die Kind-Elemente werden als Tabellenelemente auf gleicher Höhe gezeigt.*/

.hinweisbox > div:first-child:not(:only-child) {
   height: 60px;
   width: 60px;
}
/* Feste Breite für Symbolbilder in Hinweisboxen. */

.hinweisboxrahmen {
   border: solid 3px #008965;
   box-shadow: 5px 5px 5px 0px Silver;
}
/* Rahmen der Hinweisbox wird getrennt abgehandelt. Nur Hinweisboxen mit dieser Klasse erhalten einen Rahmen in Unigrün;
   Aktuell sind das: Hinweis, Information, Verpflichtend und Verweis */

.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 img {
   height: auto;
   max-width: 100%;
}

.mw-parser-output > .screenshotgroß {
   max-width: 1020px;
}

.screenshotImText > div {
   float: left;
   margin-right: 1em;
   margin-bottom: 1em;
}
/* Screenshots bspw. von kleineren Schaltflächen können auch im Textfluss dargestellt werden. */

.screenshotrahmen,
.kachel,
#toc {
   box-shadow: 5px 5px 5px 0px Silver;
}
/*Screenshots, die Kacheln der Startseite und die Seiten-Inhaltsverzeichnisse erhalten einen leichten grauen Schatten. Der Rahmen der Hinweisbox wird separat definiert.*/

.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 */

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

p + .absatz,
.absatz + p {
   margin-top: 0.5em
}

.seitenindex {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
   grid-auto-flow: dense;
   column-gap: 2em;
   row-gap: 1.5em;
   align-items: start;
}
/* 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:focus-within,
.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. Der Hintergrund wird abgedunkelt. Rahmen und Schatten erhalten eine blaue Färbung, die sich am Design des Wiki des Wikis orientiert. */

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

#p-Admin,
li#t-recentchangeslinked,
li#t-upload,
li#t-specialpages,
li#t-permalink,
li#t-info,
li#t-cite,
.noautonum .tocnumber {
   display: none;
}
/* nav#p-Admin: Für normale Benutzer:innen werden die Links für Admins ausgeblendet. Über die spezielle css-Seite für Administrator:innen (MediaWiki:Group-sysop.css) wird diese Ausblendung wieder aufgehoben.*/
/* li#t-...:    Einzelne Werkzeuge im linken Seitenmenü werden ausgeblendet */
/* .noautonum:  Kann genutzt werden, um im Inhaltsverzeichnis die Nummerierung zu unterdrücken. */

.kachel,
#mw-panel .vector-menu-content a {
   transition-property: box-shadow, border-color, background-color;
   transition-duration: 1s;
}
/* Der Farbübergang des Seitenmenü und der Kacheln im Seitenindex wird nicht sofort durchgeführt, sondern braucht eine Sekunde. */

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

.definitionsliste {
   display: grid;
   grid-auto-columns: fit-content( 18ch ) 1fr;
   column-gap: 1em;
   row-gap: 0.5em;
}
/* Ermöglicht mit der Vorlage {{Definitionsliste}} eine Aufzählung, in der das(die) Schlagwort(e) fett hervorgehoben werden und der Definitionstext als eingerückter Textblock dargestellt wird.*/

.defPunkt {
   grid-column: 1;
   font-weight: bold;
}
/* Formatiert die Schlagworte einer Definitionsliste fett und stellt sie vor den Textblock. */

.defErläuterung {
   grid-column: 2;
}
/* Stellt den Textblock in einer Definitionsliste in eine zweite Spalte. */

.definitionsliste p:last-child {
   margin-bottom: 0;
}
/* Verhindert, dass der letzte zusätzliche Absatz einer Definitionsliste einen größeren Zeilenabstand hat als die übrigen Textblöcke. */

.absatz:after {
   content: "";
   display: block;
   clear: both;
}

.mw-parser-output {
     container-type: inline-size;
}

@container (min-width: 65em) {
   .anleitung {
      display: grid;
      grid-template-columns: 50em minmax(5em, 20em) auto;
      grid-auto-flow: row dense;
   }

   .anleitung > :not(:first-child) {
      grid-column: 1;
   }
   .anleitung > .screenshotgroß:focus-within,
   .anleitung > .screenshotgroß:hover {
      grid-column: 1 / span 3;
      z-index: 100;
      transition: all 1s;
   }
   .anleitung > .toc,
   .anleitung > .screenshotgroß {
      justify-self: start;
   }
   .anleitung > screenshotgroß::after {
      content: 'Vergrößerbar';
      position: absolute;
      bottom: 0;
      left: 0.2em;
      color: red;
      font-size: 2em;
      z-index: 10;
   }
}

@container (width < 65em) {
   .anleitung {
      max-width: 50em;
   }
   .übersicht {
      display: none;
   }
}

.übersicht {
   position: sticky;
   grid-row: 1 / 10;
   grid-column: 2;
   margin-left: 0.5em;
   align-self: start;
   top: 1em;
   border: none;
   background-color: white;
}

.übersicht ul {
   list-style-type: none;
   list-style-image: none;
   margin: 0;
   padding: 0;
   width: 50%;
}

.übersicht ul ul {
   position: absolute;
   left: 50%;
   top: 1.67em;
}

.übersicht li li {
   font-size: 0;
}

.übersicht li:focus-within li,
.übersicht li:hover li {
   font-size: 80%;
}

.testtest::after {
      content: 'Vergrößerbar';
      position: absolute;
      bottom: 0;
      left: 0.2em;
      color: red;
      font-size: 2em;
      z-index: 10;
}