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;
   margin-bottom: 2em;
   min-height: 64px;
   width: 100%;
}

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

.catlinks {
   margin-top: 1.6em;
}
/* Zusätzlicher Abstand vor der Auflistung der Kategorien. */

.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%;
}
/* Bilder */

.mw-parser-output > .screenshotgroß {
   max-width: 1020px;
}
/* Feste Breite für große Screenshots, wenn nicht die Vorlage Anleitung verwendet wird. */

.hinweisbox > div > .screenshotrahmen {
   margin-right: 5px;
}

.hinweisbox > div > .screenshotrahmen:first-child {
   margin-top: 5px;
}

.hinweisbox > div > .screenshotrahmen:last-child {
   margin-bottom: 10px;
}
/* Abstände für eine Verwendung von Screenshots innerhalb einer Hinweisbox. */

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

.übersicht > div,
.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.*/

table.tanleitung {
   width: 100%;
}

.mw-parser-output > .schulung:first-child ~ .tanleitung td:first-child,
.schulung .tanleitung td:first-child,
.wikitable .tanleitung,
.tanleitung th {
   background-color: #008965 !important;
   color: white;
   font-weight: bold;
}

.mw-parser-output > .schulung:first-child ~ .tanleitung td:last-child,
.schulung .tanleitung td:last-child {
   width: 100%;
}
/* In Tabellen der Anleitungen wird die Definition genutzt, um der Tabellenkopfzeile eine Uni-grünen Hintergrund und die Schriftfarbe auf weiß zu setzen. */
/* In der Seite Schulung wird jeweils die erste Spalte der Tabelle formatiert. */

tr:hover {
   background-color: lavender !important;
}
/* Als Lesehilfe wird die mit der Maus berührte Zeile einer Tabelle dezent farblich hervorgehoben. */

#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. */
:is(.screenshot, .absatz, .hinweisbox, p, ul, ol, table) + :is(h2, h3),
.mw-parser-output > .anleitung:first-child ~ h2:first-of-type {
  margin-top: 2em !important;
}
/* größerer Zeilenabstand über den Überschriften */


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

p + .absatz,
.absatz + p {
   margin-top: 0.5em
}
/* Wenn die Vorlage AnleitungAbsatz auf einen normalen Absatz folgt (oder umgekehrt), wird ein Abstand eingefügt, wie er zwischen zwei normalen Absätzen automatisch eingefügt wird. */

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

.übersicht > div,
.kachel {
   border-top: solid 2px darkgray;
   border-left: solid 2px darkgray;
   border-right: solid 2px gray;
   border-bottom: solid 2px gray;
   background-color: gainsboro;
}
.kachel {
   text-align: center;
}
/* 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 oder sie mit dem Tabulator ausgewählt wurde. 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;
}
/* Verhindert ein einfließen des Textes bei sehr kleinen Screenshots. */

.mw-parser-output {
     container-type: inline-size;
}
/* Weißt dem Seiteninhalt einen Container zu. Kindelemente dieses Containers können sich auf die zur Verfügung stehende Breite beziehen. So werden Abfragen nach der Bildschirmbreite überflüssig. */

@container (min-width: 53em) {
/* Alle hier definierten Eigenschaften kommen nur zum Tragen, wenn mindestens 65em Seiteninhalt zur Verfügung stehen. */
   .anleitung {
/*    display: grid;
      grid-template-columns: 50em minmax(5em, 20em) auto;
      grid-auto-flow: row dense; */
   }
/* Aktuell nicht verwendet. Das Anleitungsdesign war zunächst als Grid geplant. */

   .mw-parser-output > .anleitung:first-child ~ * {
      max-width: 50em;
      line-height: 150%;
   }
   /* Alle Kindelemente der Anleitung erhalten eine maximale Breite und eine passende Zeilenhöhe zur Wahrung der Barrierefreiheit. */

   .mw-parser-output > .anleitung:first-child ~ .screenshotgroß {
      transition: all 1s;
      width: max-content;
   }
   /* Die Vergrößerung und auch das zurückfallen auf normale Größe der großen Screenshots wird mit einer Sekunde Verzögerung ausgeführt. So wird daraus eine fließende Bewegung. */

   .mw-parser-output > .anleitung:first-child ~ .screenshotgroß:focus-within,
   .mw-parser-output > .anleitung:first-child ~ .screenshotgroß:hover {
      max-width: 100%;
      z-index: 100;
   }
   /* Große Screenshots werden nur noch größer dargestellt, wenn sie mit der Maus oder dem Tabulator ausgewählt werden. */

   .mw-parser-output > .anleitung:first-child ~ .toc,
   .mw-parser-output > .anleitung:first-child ~ .screenshotgroß {
      justify-self: start;
   }
   /* Ausrichtung von Inhaltsverzeichnis und großen Screenshots. Es wird nur der tatsächlich benötigte Platz eingenommen. Nicht die volle zur Verfügung stehende Breite. */

   .mw-parser-output > .anleitung:first-child ~ .screenshotgroß {
      position: relative;
   }

   .mw-parser-output > .anleitung:first-child ~ .screenshotgroß:not(:hover)::after {
      content: 'Vergrößerbar';
      position: absolute;
      bottom: 0;
      left: 0.2em;
      color: red;
      font-size: 2em;
      z-index: 10;
   }
   /* Große Screenshots erhalten eine Markierung 'Vergrößerbar' solange sie nicht ausgewählt wurden. Dazu muss die Position des Screenshots als relativ sein und der Schriftzug dazu absolut gesetzt werden. */
}

@container (width < 53em) {
   .mw-parser-output > .anleitung:first-child ~ * {
      max-width: 50em;
   }
   .übersicht {
      display: none;
   }
   .mw-parser-output > .anleitung:first-child ~ * {
      line-height: 150%;
   }
}
/* Bei wenig zur Verfügung stehendem Platz wird nur noch die maximale Breite und die Zeilenhöhe definiert. Falls das Menü 'Übersicht' verwendet wird, wird es jetzt ausgeblendet. */

.übersicht {
   position: sticky;
   height: 2em;
   top: 4em;
   max-width: 50em;
   z-index: 1000;
}
/* Menü für Anleitungen. (ToDo) Das Menü soll im rechts verfügbaren Platz angezeigt werden. Das Menü wandert beim Scrollen mit. */

.übersicht > div {
   padding: 0 0.5em;
   height: fit-content;
}

/* .tooltip {
   color: #c32e04;
   text-decoration: underline;
   cursor: help;
} */

[data-tooltip] {
   position: relative;
}

[data-tooltip]::after {
   content: attr(data-tooltip);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s;
   display: block;
   position: absolute;
   bottom: 1em;
   left: -4em;
   max-width: 30em;
   width: max-content;
   padding: 0.5em;
   z-index: 1000;
   color: #000;
   background-color: #d8edfc;
   border: solid 1px steelblue;
   border-radius: 0.5em;
}

[data-tooltip]:hover::after {
   opacity: 1;
}
/* Tooltip kann in Verbindung mit der Vorlage Tooltip|Anzeigetext|Glossareintrag eingebunden werden.
   Anzeigetext = Dieser Text erscheint im Fließtext der Anleitung unterstrichen.
   Glossareintrag = Der Text dieses Eintrags wird beim Bewegen des Cursers über den Anzeigetext über diesem als kleine Box eingeblendet. Es darf sich dabei nur um einen einzelnen Absatz handeln. Der Absatz muss in der Seite im Glossar mit "onlyinclude" geklammert werden und darf keine HTML-Tags enthalten. */

.definitionsliste .hinweisbox {
   grid-column: 1 / 3;
}