MediaWiki:Common.css: Unterschied zwischen den Versionen

Aktuelle Version vom 4. Juli 2024, 11:52 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */




/* ************************************************************ */
/* *******     SEITENLEISTE UND NAVIGATIONSELEMENTE     ******* */
/* ************************************************************ */

/* Allgemeines zum Interface */
/* Wir wollen die Toolbox in der Seitenleiste nicht anzeigen, damit die anonymen Benutzer, die ja sowieso keine Bearbeitungs-Rechte haben, nicht verwirrt werden. */

#p-tb { display: none; }

/* Wir wollen auch nicht, dass der Vector-Skin jeden Benutzer fragt, ob er lieber den alten Vektor-Skin verwenden möchte. */
/* Man findet verschiedene Anleitungen dazu, wie man das erreichen kann. Ein eleganterer Ansatz dazu steht in MediaWiki:Vector.css. Leider funktioniert er nicht zuverlässig für alle Benutzer. */
/* Deshalb machen wir hier was unelegantes. Weil der entsprechende Text keine Css-id zugewiesen bekommen hat, verstecken wir einfach eine allgemeine Class, zu der er gehört. Sonst scheint nichts diese Class zu verwenden, aber es ist natürlich ein Risiko da, dass sich das bei Zukünftigen Mediawiki-Versionen ändert. */

.mw-sidebar-action-item{
    display: none
}





/* ************************************************ */
/* **************** ÜBERSCHRIFTEN ***************** */
/* ************************************************ */

/* Verhindert Serifen-Schrift in den Überschriften */

h1, h2 { font-family: inherit !important; }

/* Hintergrundfarbe für h1-Überschriften festlegen */
h1 {
  font-weight: bold;
  display: inline-block;
  background-color: #59c7eb; /* Farbcode hier ersetzen */
  color: #000000; /* Farbe des Texts hier festlegen */
  /* Abstand zum Textinhalt einstellen, Sprich Fläche der blauen Hintergrundfarbe */
  padding-top: .4ex !important;
  padding-bottom: .6ex !important;
  padding-left: .6ex !important;
  padding-right: .6ex !important;
}

/* Überschriften in fett und blau unterstrichen darstellen */

h2, h3 {
  font-weight: bold;
}

/* h2 wird mit einer durchgehenden blauen Linie unterstrichen */
/* Genau wie die schwarze Linie im Vector-Standard */
/* Das wird implementiert durch eine border */

h2 {
  padding-top:4ex !important;
  margin-bottom:2ex !important;
  padding-bottom: .25ex !important;
  border-bottom: 2px solid #00A9E0;
  /* Standard ist: font-size 18pt, line-height 24pt */
  font-size: 20pt !important;
  line-height: 26pt !important;
}

/* Bei h3 bis h6 wird nur die Überschrift selbst blau unterstrichen */
/* Dabei soll der Bearbeiten-Button nicht unterstrichen werden, deshalb reicht es nicht, */
/* die text-decoration einfach auf h3 usw. anzuwenden, sondern wir brauchen span.mw-headline. */

h3 span.mw-headline, h4 span.mw-headline, h5 span.mw-headline, h6 span.mw-headline {
  text-decoration: underline;
  text-decoration-color: #00A9E0;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

/* Textgrößen und Abstände */

h3 {
  padding-top:3ex !important;
  padding-bottom:1.5ex !important;
  /* Standard ist: font-size 14pt, line-height 20pt */
  font-size: 17pt !important;
  line-height: 22pt !important;
}

h4 {
  /* Standard ist: font-size 12pt, line-height 16pt */
  font-size: 14pt !important;
  line-height: 18pt !important;
  padding-top: 1.5ex !important;
  padding-bottom: 0.7ex !important;
}

/* h5 und h6: */
  /* Standard ist: font-size 12pt, line-height 16pt */

/* h6 ist genauso gross wie h5, aber nicht (ganz so) fettgedruckt: */
h6 {
  font-weight: normal;
}




/* ****************************************** */
/* **********        BILDER        ********** */
/* ****************************************** */


/* Vorschaubilder auf 200px Größe beschränken */
.thumbinner {
  max-hight: 200px !important;
}





/* ***************************************** */
/* ********       TABELLEN        ********** */
/* ***************************************** */


/* Gewöhnliche Tabellen (Klasse wikitable; visueller Editor: "stilisiert") */


table.wikitable{
    margin-top:2.7ex !important;
    margin-bottom:2.7ex !important;
    border: solid #00a9e0 2px;
    /*padding: 5em !important;*/
    /* background:#ecffff; */
    /* border: 0px; */
    background: white;
    /* box-shadow: 0.1em 0.1em 3em rgba(0,169,224,0.5); */
    box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75);
    /* border-top-left-radius: 1em; */
    /* border-top-right-radius: 1em; */
    /* border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em; */
}

table.wikitable th{
    /* border: solid #ecffff 3px; */
    /* border-top: solid #ecffff .8ex; */
    border-top: solid white .8ex;
    background: #59c7eb;
    color:black;
    /* border-top-left-radius:1em; */
    /* border-top-right-radius:1em; */
    /*border-bottom-left-radius:1em; */
    /* border-bottom-right-radius:1em; */
    border: 0em;
    padding-left: 1.4em;
    padding-right: 1.4em;
    padding-top: 0.2em;
    padding-bottom:0.2em
}

table.wikitable th:hover {
    background: #00a9e0;
    color:white;
}

table.wikitable td{
    background: white;
    border: solid #00a9e0 1px;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    /* padding: 0.4em; */
}


table.wikitable th{
    background: white;
    color:black;
    border: 0em;
}

/* Eine Tabelle zum ausprobieren: */

table.longelearningtable{
    margin-top:2.7ex !important;
    margin-bottom:2.7ex !important;
    border: solid #00a9e0 1px;
    /*padding: 5em !important;*/
    background:#ecffff;
    /* border: 0px; */
    /* background: white; */
    box-shadow: 0.1em 0.1em 3em rgba(0,169,224,0.5);
    /* border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em; */
}

table.longelearningtable th{
    /* border: solid #ecffff 3px; */
    border-top: solid #ecffff .8ex;
    background: #59c7eb;
    color:black;
    border-top-left-radius:1em;
    border-top-right-radius:1em;
    /*border-bottom-left-radius:1em;
    border-bottom-right-radius:1em;
    border: 0em;*/
    padding-left: 1.4em;
    padding-right: 1.4em;
    padding-top: 0.2em;
    padding-bottom:0.2em
}

table.longelearningtable th:hover {
    background: #00a9e0;
    color:white;
}

table.longelearningtable td{
    background: white;
    border: solid #00a9e0 1px;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    /* padding: 0.4em; */
}

/* ******************************************** */
/* *************** Listen ********************* */
/* ******************************************** */

/* Etwas mehr Abstand zwischen den einzelnen Items: */

ul li{
    padding:2.5pt;
}

ol li{
    padding:2.5pt;
}


/* ******************************************** */
/* ******** ausklappbare Zusatzinfos ********** */
/* ******************************************** */


div.extrainfocontent{
    background: #ecffff;
    border-style:solid;
    /* border-color: #00a9e0; */
    border-color: #59c7eb;
    border-width: 1px;
    font-size: 8pt;
}

span.extrainfotoggle{
    color: #00a9e0;
    font-size: 8pt;
}





/* ******************************************** */
/* ************        BOXEN        *********** */
/* ******************************************** */

/* Einige spezielle Tabellen, die in unseren Templates verwendet werden */

table.beispielboxtable, table.wichtigboxtable, table.warnungsboxtable, table.hinweisboxtable, table.linkboxtable{
    margin-left: 2em !important;
    margin-right: 2em !important;
    margin-top: 4ex !important;
    margin-bottom: 4ex !important;
    box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75);
    border-radius: 0.5em;
    border: 0px;
    line-height: 3.3ex;
}

table.wichtigboxtable{
    box-shadow: 0.1em 0.1em 0.5em 0.35em rgba(255,200,0,0.75);
}

table.warnungsboxtable{
    box-shadow: 0.1em 0.1em 0.5em 0.2em rgba(255,0,0,0.75);
}

table.linkboxtable{
    margin: auto !important;
    box-shadow: 0.5em 0.5em 1.5em rgba(0,0,0,0.75) !important;
    margin-top: 8ex !important;
    margin-bottom: 8ex !important;
}

table.beispielboxtable th, table.wichtigboxtable th, table.warnungsboxtable th, table.hinweisboxtable th, table.linkboxtable th{
    background: #59c7eb;
    color:black;
    text-align:left;
    border-radius: 0.5em;
    border: 0em;
    padding: 0.4em;
}

table.linkboxtable th{
    background: #ecffff;
    text-align: center;
}


/* Für linkboxtable endet sich im Gegensatz zu wikitable nichts, wenn man mit
der Maus über die erste Zeile fährt: */

table.linkboxtable th:hover {
    color: black;
    background: #ecffff;
}


table.beispielboxtable th:hover, table.hinweisboxtable th:hover {
    background: #00a9e0;
    color:white;
}


table.beispielboxtable td, table.wichtigboxtable td, table.warnungsboxtable td, table.hinweisboxtable td, table.linkboxtable td{
    background:#ecffff;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border: 0em;
    padding: 0.4em;
}

table.linkboxtable td {
    text-align: center !important;
    padding-top: 2ex !important;
    padding-bottom: 3ex;
    padding-left: 7ex;
    padding-right: 7ex;
}

table.linkboxtable td:hover {
    background: #00a9e0 !important;
    color:white;
}


/* Links in linkboxtables turn white when we hover the cell, otherwise
we won't be able to read them because it'd be blue on blue. */

table.linkboxtable td:hover a {
    color: white !important;
}