MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 2: Zeile 2:
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_LernpfadNeu.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_LernpfadNeu.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:RQuiz.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:RQuiz.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:zum_mw-collapsible.css");


/**
/**
Zeile 128: Zeile 129:
   #mw-content-text .GeoGebraFrame ul { margin:0; }
   #mw-content-text .GeoGebraFrame ul { margin:0; }


/**********
*
* fix Letzte Änderungen Darstellung
*
*********/
.mw-body-content .mw-collapsible.mw-changeslist-line {
text-align:inherit;
}


/******************
/******************
Zeile 820: Zeile 813:
   grid-area: weiter;
   grid-area: weiter;
   margin-inline-start: auto;
   margin-inline-start: auto;
}
/*
*
* enhancing .mw-collapsible
*
*/
.mw-collapsible {
  display: contents;
}
/**
** .mw-collapsible.button
** render the up/down chevron when there is no a inside the toggle
**/
body:not(.ns-special) .mw-body-content .mw-collapsible .mw-collapsible-toggle:not(:has(> a))::after
{
  display: inline flow-root;
  font-family: 'fontawesome-webfont';
  content: '\f078';
  transition: all .25s;
  transition-duration: 0.25s;
  margin-inline-start: .25rem;
}
body:not(.ns-special) .mw-body-content .mw-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-expanded:not(:has(> a))::after {
  transform:rotate(180deg);
  transition: all .25s;
}
.loesung-verstecken .mw-collapsible-toggle a {
  background-color:var(--zum-farbe-grau--heller);
  border-color:var(--zum-farbe-grau--dunkler);
}
.loesung-verstecken .mw-collapsible-content {
  background-color:var(--zum-farbe-grau--heller);
  border-color:var(--zum-farbe-grau--dunkler);
}
.navigation-verstecken.mw-collapsible.mw-collapsed .mw-collapsible-toggle {
  margin-block-end:0.5em !important;
}
}

Version vom 18. Februar 2024, 20:03 Uhr

@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_Box.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Vorlage_LernpfadNeu.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:RQuiz.css");
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:zum_mw-collapsible.css");

/**
 *
 */
.mediawiki audio {
 height:1.5em !important;
 display:inline-block;
}

/**
 *
 *
 */
body.not-logged-in .hidden-not-logged-in {
  display:none;
}
body:not(.not-logged-in) .hidden-logged-in {
  display:none;
}

/**
 * use correct icon for `Englisch` classes
 *
 * CS
 * 2020-06-23
 */
.mediawiki #fu-menu li#f\ächer #n-Englisch a:before,
.mediawiki #fu-offcanvas li#f\ächer #n-Englisch a:before {
  content: '\e629';
}

/**
 * use correct icon for `Latein` classes
 *
 * CS 
 * 2022-09-18 
 */
.mediawiki #fu-menu li#f\ächer #n-Latein a:before,
.mediawiki #fu-offcanvas li#f\ächer #n-Latein a:before {
  content: '\e669';
}

/**
 * Black color for `misc` classes
 *
 * CS
 * 2023-04-23
 *
 */
.mediawiki .subjects.misc a span, 
.mediawiki .subjects.misc a.new span {
  color: hsla(0, 0%, 0%, 0.8);
}

.mediawiki .misc .portal > span {
  background: hsla(0, 0%, 0%, 0.8);
}


/**
 * Sidebar Hilfen ausgeklappt für eingeloggte Nutzer
 * CS
 * 2019-04-24
 */
 
body:not(.not-logged-in) #fu-menu li#hilfen > div,
body:not(.not-logged-in) #fu-offcanvas li#hilfen > div {
display: block !important;
visibility: visible !important;
height: auto !important;
}

/*
body:not(.not-logged-in) #fu-menu li#hilfen > a,
body:not(.not-logged-in) #fu-offcanvas li#hilfen > a {
background: rgba(0, 0, 0, 0.05);
}
*/

/* hide the toogle */
body:not(.not-logged-in) #fu-menu li#hilfen > a:after,
body:not(.not-logged-in) #fu-offcanvas li#hilfen > a:after {
display: none;
}

/**
 * remove interferring default styles from #siteNotice and #localNotice
 * uses .mediawiki selector to increase specifity
 */
.mediawiki #siteNotice a { display:inline-block; }
.mediawiki #siteNotice, .mediawiki #localNotice {
 text-align:initial;
}
.mediawiki #siteNotice {
 margin: -1.5rem -1.5rem -1.5rem -1.5rem;
}
.mediawiki #localNotice {
 margin: initial;
}

/* Kennzeichnung externer Links, hinzugefügt [[Benutzer:m.scharwies]] 7. Apr. 2018 */

div#content a.external {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
    padding-right: 13px;
}

/* Floaten von Bildern, TOC, etc , hinzugefügt [[Benutzer:m.scharwies]] 7. Apr. 2018 */

div.float-right, table.float-right, ul.float-right, .float-right {
    clear: right;
    float: right;
    margin: 1em 0 1em 1em;
}

 
 /*******************
  * Fix Geogebra Styling
  *
  * Die Standardstyles greifen in das Geogebra Applet rein und sorgen für Darstellungsprobleme bei den Toolbars.
  *
  * Wir fügen .GeoGebraFrame in die Selektorkette um mit einer höheren Spezifizität drüber zukommen.
  */
  
  #mw-content-text .GeoGebraFrame ul { margin:0; }


/******************
 *
 * ZUM-Layout
 *
 ******************/
.zum-block {
  padding:0.5em;
  margin-top:0.5em;
  margin-bottom:0.5em;
}


/***********
 *
 * Mediawiki Indicators
 * - container floats on the right
 * - individual indicators are flex elements
 *
 ***********/
.mw-indicators {
  float:right;
  display:flex;
}
.mw-indicators > .mw-indicator {
  flex: 1;
}
 
 
/***********
  * Farben [[Benutzer:Christian]]
  * per Copy/Paste von [[Vorlage:Farbe]] übernehmen
  **********/
:root {
  --zum-farbe-Hervorhebung1   : #F1D850;
  --zum-farbe-Frage           : #F1D850;
  --zum-farbe-Lernpfad        : #F19D50;
  --zum-farbe-Hervorhebung2   : #C64285;
  --zum-farbe-Merksatz        : #C64285;
  --zum-farbe-Üben            : #338894;
  --zum-farbe-Ueben           : #338894;
  --zum-farbe-Arbeitsmethode  : #5E43A5;
  --zum-farbe-Unterrichtsidee : #A8DF4A;
  --zum-farbe-Experimentieren : #A8DF4A;
  --zum-farbe-Arbeitsmethode  : #5E43A5;
  --zum-farbe-Unterrichtsidee : #A8DF4A;
  --zum-farbe-Experimentieren : #A8DF4A;
  --zum-farbe-Meinung         : #DBDBDB;
  --zum-farbe-Lösung          : #DBDBDB;
  --zum-farbe-Loesung         : #DBDBDB;
  --zum-farbe-Download        : #DBDBDB;
  --zum-farbe-Kurzinfo        : #DBDBDB;
  --zum-farbe-Zitat           : #a0a0a0;
  
  
  --zum-farbe-primär                   : #F1D850;
  --zum-farbe-primär---xx-heller       : #fffcf0;
  --zum-farbe-primär---x-heller        : #fff6cc;
  --zum-farbe-primär---heller          : #FFF0A2;
  --zum-farbe-primär---hell            : #FFEA77;
  --zum-farbe-primär---dunkel          : #DEC229;
  --zum-farbe-primär---dunkler         : #AF9612;
  --zum-farbe-sekundär-1               : #C64285;
  --zum-farbe-sekundär-1--xx-heller    : #f7d9e8;
  --zum-farbe-sekundär-1--x-heller     : #f1bbd6;
  --zum-farbe-sekundär-1--heller       : #E994BF;
  --zum-farbe-sekundär-1--hell         : #D965A0;
  --zum-farbe-sekundär-1--dunkel       : #B6226D;
  --zum-farbe-sekundär-1--dunkler      : #900F50;
  --zum-farbe-sekundär-2               : #338894;
  --zum-farbe-sekundär-2--xx-heller    : #c4e3e8;
  --zum-farbe-sekundär-2--x-heller     : #a7d6dd;
  --zum-farbe-sekundär-2--heller       : #85C5CF;
  --zum-farbe-sekundär-2--hell         : #52A1AD;
  --zum-farbe-sekundär-2--dunkel       : #1B7A88;
  --zum-farbe-sekundär-2--dunkler      : #0D5F6B;
  --zum-farbe-komplementär             : #5E43A5;
  --zum-farbe-komplementär--xx-heller  : #dad2ee;
  --zum-farbe-komplementär--x-heller   : #c2b5e3;
  --zum-farbe-komplementär--heller     : #A592D7;
  --zum-farbe-komplementär--hell       : #7B63BC;
  --zum-farbe-komplementär--dunkel     : #482998;
  --zum-farbe-komplementär--dunkler    : #331878;
  --zum-farbe-orange                   : #F19D50;
  --zum-farbe-orange--xx-heller        : #fffcfa;
  --zum-farbe-orange--x-heller         : #ffe7d1;
  --zum-farbe-orange--heller           : #FFCEA2;
  --zum-farbe-orange--hell             : #FFB877;
  --zum-farbe-orange--dunkel           : #DD7F28;
  --zum-farbe-orange--dunkler          : #AE5D12;
  --zum-farbe-grün                     : #A8DF4A;
  --zum-farbe-grün--xx-heller          : #f7fdec;
  --zum-farbe-grün--x-heller           : #e6fac7;
  --zum-farbe-grün--heller             : #D4F69C;
  --zum-farbe-grün--hell               : #C0EF6F;
  --zum-farbe-grün--dunkel             : #8FCD25;
  --zum-farbe-grün--dunkler            : #6CA111;
  --zum-farbe-grau                     : #DBDBDB;
  --zum-farbe-grau--xx-heller          : #fcfcfc;
  --zum-farbe-grau--x-heller           : #f7f7f7;
  --zum-farbe-grau--heller             : #F1F1F1;
  --zum-farbe-grau--heller             : #F1F1F1;
  --zum-farbe-grau--heller             : #F1F1F1;
  --zum-farbe-grau--hell               : #ececec;
  --zum-farbe-grau--dunkel             : #C8C8C8;
  --zum-farbe-grau--dunkler            : #a0a0a0;
  --zum-farbe-links                    : #0077dd;
  --zum-farbe-links--xx-heller         : #f5faff;
  --zum-farbe-links--x-heller          : #cce7ff;
  --zum-farbe-links--heller            : #47a9ff;
  --zum-farbe-links--heller            : #47a9ff;
  --zum-farbe-links--heller            : #47a9ff;
  --zum-farbe-links--hell              : #1492ff;
  --zum-farbe-links--dunkel            : #0068bd;
  --zum-farbe-links--dunkler           : #005599;
}


/* Bedeutungsfarben */
.zum-farbe-Hervorhebung1   { color:#F1D850; }
.zum-farbe-Frage           { color:#F1D850; }
.zum-farbe-Lernpfad        { color:#F19D50; }
.zum-farbe-Hervorhebung2   { color:#C64285; }
.zum-farbe-Merksatz        { color:#C64285; }
.zum-farbe-Üben,
.zum-farbe-Ueben           { color:#338894; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Meinung         { color:#DBDBDB; }
.zum-farbe-Lösung,
.zum-farbe-Loesung         { color:#DBDBDB; }
.zum-farbe-Download        { color:#DBDBDB; }
.zum-farbe-Kurzinfo        { color:#DBDBDB; }
.zum-farbe-Zitat           { color:#666; }

.zum-hintergrund-Hervorhebung1   { background-color:#F1D850; }
.zum-hintergrund-Frage           { background-color:#F1D850; }
.zum-hintergrund-Lernpfad        { background-color:#F19D50; }
.zum-hintergrund-Hervorhebung2   { background-color:#C64285; }
.zum-hintergrund-Merksatz        { background-color:#C64285; }
.zum-hintergrund-Üben,
.zum-hintergrund-Ueben           { background-color:#338894; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Meinung         { background-color:#DBDBDB; }
.zum-hintergrund-Lösung,
.zum-hintergrund-Loesung         { background-color:#DBDBDB; }
.zum-hintergrund-Download        { background-color:#DBDBDB; }
.zum-hintergrund-Kurzinfo        { background-color:#DBDBDB; }
.zum-hintergrund-Zitat           { background-color:#a0a0a0; }  


/* komplettes Farbschema */
.zum-farbe-primär                            { color: #F1D850; }
.zum-farbe-primär.zum-farbe-xx-heller        { color: #fffcf0; }
.zum-farbe-primär.zum-farbe-x-heller         { color: #fff6cc; }
.zum-farbe-primär.zum-farbe-heller           { color: #F1D850; }
.zum-farbe-primär.zum-farbe-hell             { color: #FFEA77; }
.zum-farbe-primär.zum-farbe-dunkel           { color: #DEC229; }
.zum-farbe-primär.zum-farbe-dunkler          { color: #AF9612; }
.zum-farbe-sekundär-1                        { color: #C64285; }
.zum-farbe-sekundär-1.zum-farbe-xx-heller    { color: #f7d9e8; }
.zum-farbe-sekundär-1.zum-farbe-x-heller     { color: #f1bbd6; }
.zum-farbe-sekundär-1.zum-farbe-heller       { color: #E994BF; }
.zum-farbe-sekundär-1.zum-farbe-hell         { color: #D965A0; }
.zum-farbe-sekundär-1.zum-farbe-dunkel       { color: #B6226D; }
.zum-farbe-sekundär-1.zum-farbe-dunkler      { color: #900F50; }
.zum-farbe-sekundär-2                        { color: #338894; }
.zum-farbe-sekundär-2.zum-farbe-xx-heller    { color: #c4e3e8; }
.zum-farbe-sekundär-2.zum-farbe-x-heller     { color: #a7d6dd; }
.zum-farbe-sekundär-2.zum-farbe-heller       { color: #85C5CF; }
.zum-farbe-sekundär-2.zum-farbe-hell         { color: #52A1AD; }
.zum-farbe-sekundär-2.zum-farbe-dunkel       { color: #1B7A88; }
.zum-farbe-sekundär-2.zum-farbe-dunkler      { color: #0D5F6B; }
.zum-farbe-komplementär                      { color: #5E43A5; }
.zum-farbe-komplementär.zum-farbe-xx-heller  { color: #dad2ee; }
.zum-farbe-komplementär.zum-farbe-x-heller   { color: #c2b5e3; }
.zum-farbe-komplementär.zum-farbe-heller     { color: #A592D7; }
.zum-farbe-komplementär.zum-farbe-hell       { color: #7B63BC; }
.zum-farbe-komplementär.zum-farbe-dunkel     { color: #482998; }
.zum-farbe-komplementär.zum-farbe-dunkler    { color: #331878; }
.zum-farbe-orange                            { color: #F19D50; }
.zum-farbe-orange.zum-farbe-xx-heller        { color: #fffcfa; }
.zum-farbe-orange.zum-farbe-x-heller         { color: #ffe7d1; }
.zum-farbe-orange.zum-farbe-heller           { color: #FFCEA2; }
.zum-farbe-orange.zum-farbe-hell             { color: #FFB877; }
.zum-farbe-orange.zum-farbe-dunkel           { color: #DD7F28; }
.zum-farbe-orange.zum-farbe-dunkler          { color: #AE5D12; }
.zum-farbe-grün                              { color: #A8DF4A; }
.zum-farbe-grün.zum-farbe-xx-heller          { color: #f7fdec; }
.zum-farbe-grün.zum-farbe-x-heller           { color: #e6fac7; }
.zum-farbe-grün.zum-farbe-heller             { color: #D4F69C; }
.zum-farbe-grün.zum-farbe-hell               { color: #C0EF6F; }
.zum-farbe-grün.zum-farbe-dunkel             { color: #8FCD25; }
.zum-farbe-grün.zum-farbe-dunkler            { color: #6CA111; }
.zum-farbe-grau                              { color: #DBDBDB; }
.zum-farbe-grau.zum-farbe-xx-heller          { color: #fcfcfc; }
.zum-farbe-grau.zum-farbe-x-heller           { color: #f7f7f7; }
.zum-farbe-grau.zum-farbe-heller             { color: #F1F1F1; }
.zum-farbe-grau.zum-farbe-heller             { color: #F1F1F1; }
.zum-farbe-grau.zum-farbe-heller             { color: #F1F1F1; }
.zum-farbe-grau.zum-farbe-hell               { color: #ececec; }
.zum-farbe-grau.zum-farbe-dunkel             { color: #C8C8C8; }
.zum-farbe-grau.zum-farbe-dunkler            { color: #a0a0a0; }
.zum-farbe-links                             { color: #0077dd; }
.zum-farbe-links.zum-farbe-xx-heller         { color: #f5faff; }
.zum-farbe-links.zum-farbe-x-heller          { color: #cce7ff; }
.zum-farbe-links.zum-farbe-heller            { color: #47a9ff; }
.zum-farbe-links.zum-farbe-heller            { color: #47a9ff; }
.zum-farbe-links.zum-farbe-heller            { color: #47a9ff; }
.zum-farbe-links.zum-farbe-hell              { color: #1492ff; }
.zum-farbe-links.zum-farbe-dunkel            { color: #0068bd; }
.zum-farbe-links.zum-farbe-dunkler           { color: #005599; }

. 
.zum-hintergrund-primär                            { background-color: #F1D850; }
.zum-hintergrund-primär.zum-farbe-xx-heller        { background-color: #fffcf0; }
.zum-hintergrund-primär.zum-farbe-x-heller         { background-color: #fff6cc; }
.zum-hintergrund-primär.zum-farbe-heller           { background-color: #F1D850; }
.zum-hintergrund-primär.zum-farbe-hell             { background-color: #FFEA77; }
.zum-hintergrund-primär.zum-farbe-dunkel           { background-color: #DEC229; }
.zum-hintergrund-primär.zum-farbe-dunkler          { background-color: #AF9612; }
.zum-hintergrund-sekundär-1                        { background-color: #C64285; }
.zum-hintergrund-sekundär-1.zum-farbe-xx-heller    { background-color: #f7d9e8; }
.zum-hintergrund-sekundär-1.zum-farbe-x-heller     { background-color: #f1bbd6; }
.zum-hintergrund-sekundär-1.zum-farbe-heller       { background-color: #E994BF; }
.zum-hintergrund-sekundär-1.zum-farbe-hell         { background-color: #D965A0; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkel       { background-color: #B6226D; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkler      { background-color: #900F50; }
.zum-hintergrund-sekundär-2                        { background-color: #338894; }
.zum-hintergrund-sekundär-2.zum-farbe-xx-heller    { background-color: #c4e3e8; }
.zum-hintergrund-sekundär-2.zum-farbe-x-heller     { background-color: #a7d6dd; }
.zum-hintergrund-sekundär-2.zum-farbe-heller       { background-color: #85C5CF; }
.zum-hintergrund-sekundär-2.zum-farbe-hell         { background-color: #52A1AD; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkel       { background-color: #1B7A88; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkler      { background-color: #0D5F6B; }
.zum-hintergrund-komplementär                      { background-color: #5E43A5; }
.zum-hintergrund-komplementär.zum-farbe-xx-heller  { background-color: #dad2ee; }
.zum-hintergrund-komplementär.zum-farbe-x-heller   { background-color: #c2b5e3; }
.zum-hintergrund-komplementär.zum-farbe-heller     { background-color: #A592D7; }
.zum-hintergrund-komplementär.zum-farbe-hell       { background-color: #7B63BC; }
.zum-hintergrund-komplementär.zum-farbe-dunkel     { background-color: #482998; }
.zum-hintergrund-komplementär.zum-farbe-dunkler    { background-color: #331878; }
.zum-hintergrund-orange                            { background-color: #F19D50; }
.zum-hintergrund-orange.zum-farbe-xx-heller        { background-color: #fffcfa; }
.zum-hintergrund-orange.zum-farbe-x-heller         { background-color: #ffe7d1; }
.zum-hintergrund-orange.zum-farbe-heller           { background-color: #FFCEA2; }
.zum-hintergrund-orange.zum-farbe-hell             { background-color: #FFB877; }
.zum-hintergrund-orange.zum-farbe-dunkel           { background-color: #DD7F28; }
.zum-hintergrund-orange.zum-farbe-dunkler          { background-color: #AE5D12; }
.zum-hintergrund-grün                              { background-color: #A8DF4A; }
.zum-hintergrund-grün.zum-farbe-xx-heller          { background-color: #f7fdec; }
.zum-hintergrund-grün.zum-farbe-x-heller           { background-color: #e6fac7; }
.zum-hintergrund-grün.zum-farbe-heller             { background-color: #D4F69C; }
.zum-hintergrund-grün.zum-farbe-hell               { background-color: #C0EF6F; }
.zum-hintergrund-grün.zum-farbe-dunkel             { background-color: #8FCD25; }
.zum-hintergrund-grün.zum-farbe-dunkler            { background-color: #6CA111; }
.zum-hintergrund-grau                              { background-color: #DBDBDB; }
.zum-hintergrund-grau.zum-farbe-xx-heller          { background-color: #fcfcfc; }
.zum-hintergrund-grau.zum-farbe-x-heller           { background-color: #f7f7f7; }
.zum-hintergrund-grau.zum-farbe-heller             { background-color: #F1F1F1; }
.zum-hintergrund-grau.zum-farbe-hell               { background-color: #ececec; }
.zum-hintergrund-grau.zum-farbe-dunkel             { background-color: #C8C8C8; }
.zum-hintergrund-grau.zum-farbe-dunkler            { background-color: #a0a0a0; } 
.zum-hintergrund-links                             { background-color: #0077dd; }
.zum-hintergrund-links.zum-farbe-xx-heller         { background-color: #f5faff; }
.zum-hintergrund-links.zum-farbe-x-heller          { background-color: #cce7ff; }
.zum-hintergrund-links.zum-farbe-heller            { background-color: #47a9ff; }
.zum-hintergrund-links.zum-farbe-hell              { background-color: #1492ff; }
.zum-hintergrund-links.zum-farbe-dunkel            { background-color: #0068bd; }
.zum-hintergrund-links.zum-farbe-dunkler           { background-color: #005599; } 
 
/* overrides 
 * uses mediawiki parent selector to establish override
 */
.mediawiki .box.hervorhebung1   { border-left-color:#F1D850; }
.mediawiki .box.frage           { border-left-color:#F1D850; }
.mediawiki .box.lernpfad        { border-left-color:#F19D50; }
.mediawiki .box.hervorhebung2   { border-left-color:#C64285; }
.mediawiki .box.merksatz        { border-left-color:#C64285; }
.mediawiki .box.üben,
.mediawiki .box.ueben           { border-left-color:#338894; }
.mediawiki .box.arbeitsmethode  { border-left-color:#5E43A5; }
.mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; }
.mediawiki .box.experimentieren { border-left-color:#A8DF4A; }
.mediawiki .box.arbeitsmethode  { border-left-color:#5E43A5; }
.mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; }
.mediawiki .box.experimentieren { border-left-color:#A8DF4A; }
.mediawiki .box.meinung         { border-left-color:#DBDBDB; }
.mediawiki .box.lösung,
.mediawiki .box.loesung         { border-left-color:#DBDBDB; }
.mediawiki .box.download        { border-left-color:#DBDBDB; }
.mediawiki .box.kurzinfo        { border-left-color:#DBDBDB; }
.mediawiki .box.zitat           { border-left-color:#a0a0a0; } 


/*
 * Styles for the Widget:Dialog-* widgets.
 *
 */
dialog.zum-dialog.popup {
  all:revert; /*we want the popup class to get the MW styling in cascaded childs, but the dialog itself should be native */
  border:0;
  padding:0;
  box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.5);
  min-width:95vw;
  max-width:95vw;
}

dialog.zum-dialog.popup[open] {
  display:flex;
  flex-direction:column;
}

@media (min-width: 851px) {
  dialog.zum-dialog.popup {
    min-width:33vw;
  }
}
.zum-dialog-opener {
  cursor:pointer;
}

/* special rules for qr code in dialog */
.zum-dialog-opener .qrlite-result img,
.zum-dialog-opener .qrlite-result svg {
  width:1.5rem;
  height:1.5rem;
}
.zum-dialog .zum-qrcode .qrlite-result img,
.zum-dialog .zum-qrcode .qrlite-result svg {
  margin: 0 auto;
  display: block;
 
  width: auto;
  height: auto !important;
  max-width:60%;
  max-height:60%;
  /* Regeln für Browser die CSS Viewport Units (https://caniuse.com/#feat=viewport-units) unterstützen */
  width: 80vmin;
  height: 80vmin !important;
  max-width:80vmin;
  max-height:80vmin;
}



/* ZUM Portalseite Highlight Element
 *
 * Relevant Markup Sketch
 * <>.zum-portalseite-highlight
 *   a
 *.    <>.zum-portalseite-highlight--icon
 *   a
 *.  p
 */
.zum-portalseite-highlight {
  display:grid;
  --icon-size: 2rem;
  grid-gap:0.2rem;
  grid-template-columns: var(--icon-size);
}
.zum-portalseite-highlight > a {
  grid-column: 2;
}
.zum-portalseite-highlight > a:first-child {
  grid-column: 1;
  grid-row: 1 / 3;
  margin-right:0.2rem;
  margin-right:calc(var(--icon-size) / 10);
}
.zum-portalseite-highlight > p {
  grid-column: 1 / 3;
}
.zum-portalseite-highlight > p:first-of-type {
  margin-top:0;
}

.zum-portalseite-highlight .zum-portalseite-highlight--icon {
  max-width:var(--icon-size);
  max-height:var(--icon-size);
  font-size: var(--icon-size);
}

@media (min-width: 851px) {
  .zum-portalseite-highlight {
    --icon-size:5rem;
  }
  .zum-portalseite-highlight > p {
    grid-column: 2;
  }
}


/* ZUM Portalseite Spotlight Element
 *
 * Relevant Markup Sketch
 * <>.zum-portalseite-spotlight
 *   <>.zum-portalseite-spotlight--icon__container
 *     a
 *.      <>.zum-portalseite-highlight--icon
 *.  a
 *   p
 */

.zum-portalseite-spotlight {
  display:grid;
  --icon-size: 2rem;
  grid-template-columns:min-content;
}
.zum-portalseite-spotlight > p {
  grid-row: 2;
  grid-column: 1 / 3;
}
.zum-portalseite-spotlight > p:first-of-type {
  margin-top:0;
}


.zum-portalseite-spotlight .zum-portalseite-spotlight--icon {
  max-width:var(--icon-size) !important; /* use !important to break MW styles */
  max-height:var(--icon-size);
  font-size: var(--icon-size);
  margin:0.2rem;
}

@media (min-width: 851px) {
  .zum-portalseite-spotlight {
    --icon-size:5rem;
    justify-items: center;
    grid-template-columns:unset;
  }
  .zum-portalseite-spotlight--icon_container {
    grid-row:unset;
    grid-column:unset;
  }
  .zum-portalseite-spotlight > p {
    grid-row: 3;
    grid-column: 1;
  }
}

/*
 * ZUM Toggle
 */
[data-zum-toggle-target]:not(.zum-toggle__invisible) {
  background: var(--zum-farbe-links--x-heller);
  outline:1px solid var(--zum-farbe-links--heller);
  margin-inline:0.3em;
  padding-inline: 0.3em;
  border-radius: 0.3em;
  display: inline-block;
  cursor:pointer;
}
[data-zum-toggle-target]::after {
  cursor:pointer;
  color:var(--zum-farbe-links--heller);
  margin-inline-start:max(0.25em, 0.25rem);
  display:inline-block;
}
[data-zum-toggle-target]:not([data-zum-toggle-value=true])::after {
  content:'▿';
}
[data-zum-toggle-target][data-zum-toggle-value=true]::after {
  content:'▵';
}
[data-zum-toggle-target]:not([data-zum-toggle-value=true]).zum-toggle__invisible::after {
  content:'aufdecken ▿';
  font-size:max(0.5em, 0.66rem);
}
[data-zum-toggle-target][data-zum-toggle-value=true].zum-toggle__invisible::after {
  content:'verbergen ▵';
  font-size:max(0.5em, 0.66rem);
}

.zum-toggle--content {
    display:none;
}

.zum-toggle--content[data-zum-toggle-visible="true"] {
    display:revert;
}

.zum-toggle--content__partial {
  max-height:20em; 
  overflow:hidden;
  position:relative;
}

.zum-toggle--content__partial:not([data-zum-toggle-visible="true"])::after {
  content: '';
  position: absolute;
  bottom:0;left:0;right:0;
  height:100px;
  background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none; 
}

.zum-toggle--content__partial[data-zum-toggle-visible="true"] {
  max-height: 1000em;transition:max-height 0.15s ease-in;
}


/* .button -> Vorlage:Button */ 
.button {
  display: inline flow-root; 
}
.button-left,
.button-center,
.button-right
{
  display: flex;
}

@media(min-width:1360px) {
  .button-right a,
  .button-right:not(:has(> a)) {
    margin-inline-start: auto;
  }
  .button-center a,
  .button-center:not(:has(> a)) {
    margin-inline: auto;
  }
  .button-left a,
  .button-left:not(:has(> a)) {
    margin-inline-end: auto;
  }
}


:is(.button, .button-left, .button-center, .button-right).button__small a,
:is(.button, .button-left, .button-center, .button-right).button__small:not(:has(> a)) {
  padding-block:0;
  padding-inline:0.4em;
}

.button  a,
.button:not(:has(> a)),
.button-left  a,
.button-left:not(:has(> a)),
.button-center a,
.button-center:not(:has(> a)),
.button-right  a,
.button-right:not(:has(> a)) {
  padding-inline:0.6em;
  padding-block:0.2em;
  display:inline flow-root;
  outline: 1px solid transparent;
  border-radius: 0.2em;
}

.button-left              a .fa,
.button-left:not(:has(> a)) .fa,
.button-center              a .fa,
.button-center:not(:has(> a)) .fa,
.button-right              a .fa,
.button-right:not(:has(> a)) .fa {
  margin-inline:0.2em;
}


.mediawiki .button a,
.mediawiki .button:not(:has(> a)),
.mediawiki .button-left a,
.mediawiki .button-left:not(:has(> a)),
.mediawiki .button-center a,
.mediawiki .button-center:not(:has(> a)),
.mediawiki .button-right a,
.mediawiki .button-right:not(:has(> a))      { 
  color: hsl(0,0%,20%);
  background-color: var(--zum-farbe-grau--hell); 
  outline-color: var(--zum-farbe-grau-dunkel);
}

.mediawiki .button:not(:has(> a)):hover,   
.mediawiki .button:not(:has(> a)):focus,
.mediawiki .button-left:not(:has(> a)):hover,   
.mediawiki .button-left:not(:has(> a)):focus,
.mediawiki .button-center:not(:has(> a)):hover, 
.mediawiki .button-center:not(:has(> a)):focus,
.mediawiki .button-right:not(:has(> a)):hover,
.mediawiki .button-right:not(:has(> a)):focus {
  text-decoration:underline;
}

.mediawiki .button a:hover,   
.mediawiki .button a:focus,
.mediawiki .button:not(:has(> a)):hover,   
.mediawiki .button:not(:has(> a)):focus,
.mediawiki .button-left a:hover,   
.mediawiki .button-left a:focus,
.mediawiki .button-left:not(:has(> a)):hover,   
.mediawiki .button-left:not(:has(> a)):focus,
.mediawiki .button-center a:hover, 
.mediawiki .button-center a:focus,
.mediawiki .button-center:not(:has(> a)):hover, 
.mediawiki .button-center:not(:has(> a)):focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus,
.mediawiki .button-right:not(:has(> a)):hover,
.mediawiki .button-right:not(:has(> a)):focus           { background-color: var(--zum-farbe-grau--x-heller);     }




.mediawiki .button.button-primary a,
.mediawiki .button.button-primary:not(:has(> a)),
.mediawiki .button-left.button-primary a,
.mediawiki .button-left.button-primary:not(:has(> a)),
.mediawiki .button-center.button-primary a,
.mediawiki .button-center.button-primary:not(:has(> a)),
.mediawiki .button-right.button-primary a,
.mediawiki .button-right.button-primary:not(:has(> a))  { 
  color: hsl(0,0%,20%);    
  background-color: var(--zum-farbe-links--heller); 
  outline-color: var(--zum-farbe-links);
}


.mediawiki .button.button-primary a:hover,
.mediawiki .button.button-primary a:focus,
.mediawiki .button.button-primary:not(:has(> a)):hover,
.mediawiki .button.button-primary:not(:has(> a)):focus,
.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-left.button-primary:not(:has(> a)):hover,
.mediawiki .button-left.button-primary:not(:has(> a)):focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-center.button-primary:not(:has(> a)):hover,
.mediawiki .button-center.button-primary:not(:has(> a)):focus,
.mediawiki .button-right.button-primary a:hover,
.mediawiki .button-right.button-primary a:focus,
.mediawiki .button-right.button-primary:not(:has(> a)):hover,
.mediawiki .button-right.button-primary:not(:has(> a)):focus { background-color: var(--zum-farbe-links--x-heller);  }

.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary a,
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)) {
  color:hsl(0, 0%, 20%);
  outline-color: var(--zum-farbe-sekund\är-2);
  background-color: var(--zum-farbe-sekund\är-2--x-heller);
}

.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary :is(a:hover, a:focus),
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)):is(:hover, :focus) {
  background-color: var(--zum-farbe-sekund\är-2--xx-heller);
}





/*
 * Vorlage:Fortsetzung
 */
.zum-fortsetzung {
  display: grid;
  grid-template-areas: 
    "titel  titel     titel"
    "vorher übersicht weiter";
  grid-auto-columns: 1fr;
}
.zum-fortsetzung--titel {
  grid-area: titel;
}
.zum-fortsetzung--vorher {
  grid-area: vorher;
  margin-inline-end: auto;
}
.zum-fortsetzung--\übersicht {
  grid-area: \übersicht;
  margin-inline:auto;
}
.zum-fortsetzung--weiter {
  grid-area: weiter;
  margin-inline-start: auto;
}
Abgerufen von „https://unterrichten.zum.de/index.php?title=MediaWiki:Common.css&oldid=137143“