Vorlage:Farbe: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
 
(83 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<includeonly>
<includeonly><nowiki>#</nowiki>{{#switch: {{{1|}}}
{{#switch: {{{1|}}}
|#default
| primär     
|Hervorhebung1
| {{#switch: {{{2|}}} | heller = #FFF0A2 | hell = #FFEA77 | #F1D850 | dunkel = #DEC229 | dunkler = #AF9612 }}  
|Frage
| sekundär-1
|primaer
| {{#switch: {{{2|}}} | heller = #E994BF | hell = #D965A0 | #C64285 | dunkel = #B6226D | dunkler = #900F50 }}  
|primär          = {{#switch:{{{2|}}}|xx-heller=fffcf0|x-heller=fff6cc|heller=FFF0A2|hell=FFEA77|#default=F1D850|dunkel=DEC229|dunkler=AF9612}}
| sekundär-2
|Hervorhebung2
| {{#switch: {{{2|}}} | heller = #85C5CF | hell = #52A1AD | #338894 | dunkel = #1B7A88 | dunkler = #0D5F6B }}  
|Merksatz
| komplementär
|sekundaer-1
| {{#switch: {{{2|}}} | heller = #A592D7 | hell = #7B63BC | #5E43A5 | dunkel = #482998 | dunkler = #331878 }}  
|sekundär-1      = {{#switch:{{{2|}}}|xx-heller=f7d9e8|x-heller=f1bbd6|heller=E994BF|hell=D965A0|#default=C64285|dunkel=B6226D|dunkler=900F50}}
| orange     
|Ueben
| {{#switch: {{{2|}}} | heller = #FFCEA2 | hell = #FFB877 | #F19D50 | dunkel = #DD7F28 | dunkler = #AE5D12 }}  
|Üben
| grün       
|sekundaer-2
| {{#switch: {{{2|}}} | heller = #D4F69C | hell = #C0EF6F | #A8DF4A | dunkel = #8FCD25 | dunkler = #6CA111 }}  
|sekundär-2      = {{#switch:{{{2|}}}|xx-heller=c4e3e8|x-heller=a7d6dd|heller=85C5CF|hell=52A1AD|#default=338894|dunkel=1B7A88|dunkler=0D5F6B}}
| links      
|Arbeitsmethode
| {{#switch: {{{2|}}} | heller           | hell           | #005599 | dunkel           | dunkler = #005599 }}  
|komplementär    = {{#switch:{{{2|}}}|xx-heller=dad2ee|x-heller=c2b5e3|heller=A592D7|hell=7B63BC|#default=5E43A5|dunkel=482998|dunkler=331878}}
| grau       
|Lernpfad
| {{#switch: {{{2|}}} | heller = #F1F1F1 | hell = #F1F1F1 | #DBDBDB | dunkel = #C8C8C8 | dunkler = #a0a0a0 }}  
|orange          = {{#switch:{{{2|}}}|xx-heller=fffcfa|x-heller=ffe7d1|heller=FFCEA2|hell=FFB877|#default=F19D50|dunkel=DD7F28|dunkler=AE5D12}}
| {{Farbe | primär}}
|Unterrichtsidee
}}</includeonly>
|Experimentieren
<noinclude>
|gruen
{|
|grün            = {{#switch:{{{2|}}}|xx-heller=f7fdec|x-heller=e6fac7|heller=D4F69C|hell=C0EF6F|#default=A8DF4A|dunkel=8FCD25|dunkler=6CA111}}
|links           = {{#switch:{{{2|}}}|xx-heller=f5faff      |x-heller=cce7ff      |heller=47a9ff      |hell=1492ff      |#default=0077dd|dunkel=0068bd      |dunkler=005599}}
|Meinung
|Loesung
|Lösung
|Download
|Kurzinfo
|grau            = {{#switch:{{{2|}}}|xx-heller=fcfcfc|x-heller=f7f7f7|heller=F1F1F1|hell=ececec|#default=DBDBDB|dunkel=C8C8C8|dunkler=a0a0a0}}
|Zitat        = a0a0a0
|unspezifisch    = ececec}}</includeonly><noinclude>
 
Die Vorlage {{PAGENAME}} gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.
 
Es gibt sowohl Farbnamen mit Bedeutung als auch das vollständige Farbschema. Die Vorlage verwendet bis zu 2 Parameter. Der erste Parameter ist der Farbname, der zweite kann verwendet werden um hellere oder dunklere Töne zu erhalten.
 
Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.
 
;Farbnamen mit Bedeutung
:Hervorhebung1, Frage, Lernpfad, Hervorhebung2, Merksatz, Üben, Arbeitsmethode, Unterrichtsidee, Experimentieren, Arbeitsmethode, Unterrichtsidee, Experimentieren, Meinung, Lösung, Download, Kurzinfo, Zitat
;Farbnamen aus dem Farbschema
:primär, sekundär-1, sekundär-2, komplementär, orange, grün, grau
;Helligkeitsangaben
:heller, hell, dunkel, dunkler
 
== Beispiele ==
 
 
{{Box
|einfache Farbe mit Bedeutung
|{{#tag: pre| <nowiki>{{Farbe|Merksatz}}</nowiki>}}{{Farbe | Merksatz}}
|Experimentieren
}}
 
{{Box
|einfache Farbe aus Schema mit Helligkeitsangabe
|{{#tag: pre| <nowiki>{{Farbe|komplementär|heller}}</nowiki>}}{{Farbe | komplementär|heller}}
|Experimentieren
}}
 
 
{{Box
|Verwendung über CSS-Klasse für Farbe mit Bedeutung
|{{#tag: pre| <nowiki><span class="zum-farbe-Merksatz">Text in Farbe ''Merksatz''</span></nowiki>}}{{#tag: span | Text in Farbe ''Merksatz'' |class = zum-farbe-Merksatz}}
|Experimentieren
}}
 
{{Box
|Verwendung über CSS-Klasse zum Icon Färben
|{{#tag: pre| <nowiki><span class="zum-farbe-Merksatz brainy hdg-school uk-icon-large"></span></nowiki>}}{{#tag: span ||class = zum-farbe-Merksatz brainy hdg-school uk-icon-large}}
|Experimentieren
}}
 
 
 
== Farbtabellen ==
=== Farben mit Bedeutung ===
{|class="wikitable" style="width: 100%;"
!style="width: 25%"|Hervorhebung1
|{{Farbe/Beispiel|Hervorhebung1}}
!style="width: 25%"|Frage
|{{Farbe/Beispiel|Frage}}
|-
|-
!style="width: 25%"|Lernpfad
|{{Farbe/Beispiel|Lernpfad}}
!Hervorhebung2
|{{Farbe/Beispiel|Hervorhebung2}}
|-
!Merksatz
|{{Farbe/Beispiel|Merksatz}}
!Üben
|{{Farbe/Beispiel|Üben}}
|-
!Arbeitsmethode
|{{Farbe/Beispiel|Arbeitsmethode}}
!Unterrichtsidee
|{{Farbe/Beispiel|Unterrichtsidee}}
|-
!Experimentieren
|{{Farbe/Beispiel|Experimentieren}}
!Meinung
|{{Farbe/Beispiel|Meinung}}
|-
!Lösung
|{{Farbe/Beispiel|Lösung}}
!Download
|{{Farbe/Beispiel|Download}}
|-
!Kurzinfo
|{{Farbe/Beispiel|Kurzinfo}}
!Zitat
|{{Farbe/Beispiel|Zitat}}
|}
=== Farbschema ===
{|class="wikitable"
!primär
!primär
|{{Farbe/Beispiel|primär|xx-heller}}
|{{Farbe/Beispiel|primär|x-heller}}
|{{Farbe/Beispiel|primär|heller}}
|{{Farbe/Beispiel|primär|heller}}
|{{Farbe/Beispiel|primär|hell}}
|{{Farbe/Beispiel|primär|hell}}
Zeile 30: Zeile 125:
|-
|-
!sekundär-1
!sekundär-1
|{{Farbe/Beispiel|sekundär-1|xx-heller}}
|{{Farbe/Beispiel|sekundär-1|x-heller}}
|{{Farbe/Beispiel|sekundär-1|heller}}
|{{Farbe/Beispiel|sekundär-1|heller}}
|{{Farbe/Beispiel|sekundär-1|hell}}
|{{Farbe/Beispiel|sekundär-1|hell}}
Zeile 37: Zeile 134:
|-
|-
!sekundär-2
!sekundär-2
|{{Farbe/Beispiel|sekundär-2|xx-heller}}
|{{Farbe/Beispiel|sekundär-2|x-heller}}
|{{Farbe/Beispiel|sekundär-2|heller}}
|{{Farbe/Beispiel|sekundär-2|heller}}
|{{Farbe/Beispiel|sekundär-2|hell}}
|{{Farbe/Beispiel|sekundär-2|hell}}
Zeile 44: Zeile 143:
|-
|-
!komplementär
!komplementär
|{{Farbe/Beispiel|komplementär|xx-heller}}
|{{Farbe/Beispiel|komplementär|x-heller}}
|{{Farbe/Beispiel|komplementär|heller}}
|{{Farbe/Beispiel|komplementär|heller}}
|{{Farbe/Beispiel|komplementär|hell}}
|{{Farbe/Beispiel|komplementär|hell}}
Zeile 51: Zeile 152:
|-
|-
!orange
!orange
|{{Farbe/Beispiel|orange|xx-heller}}
|{{Farbe/Beispiel|orange|x-heller}}
|{{Farbe/Beispiel|orange|heller}}
|{{Farbe/Beispiel|orange|heller}}
|{{Farbe/Beispiel|orange|hell}}
|{{Farbe/Beispiel|orange|hell}}
Zeile 58: Zeile 161:
|-
|-
!grün
!grün
|{{Farbe/Beispiel|grün|xx-heller}}
|{{Farbe/Beispiel|grün|x-heller}}
|{{Farbe/Beispiel|grün|heller}}
|{{Farbe/Beispiel|grün|heller}}
|{{Farbe/Beispiel|grün|hell}}
|{{Farbe/Beispiel|grün|hell}}
Zeile 65: Zeile 170:
|-
|-
!links
!links
|{{Farbe/Beispiel|links|xx-heller}}
|{{Farbe/Beispiel|links|x-heller}}
|{{Farbe/Beispiel|links|heller}}
|{{Farbe/Beispiel|links|heller}}
|{{Farbe/Beispiel|links|hell}}
|{{Farbe/Beispiel|links|hell}}
Zeile 72: Zeile 179:
|-
|-
!grau
!grau
|{{Farbe/Beispiel|grau|xx-heller}}
|{{Farbe/Beispiel|grau|x-heller}}
|{{Farbe/Beispiel|grau|heller}}
|{{Farbe/Beispiel|grau|heller}}
|{{Farbe/Beispiel|grau|hell}}
|{{Farbe/Beispiel|grau|hell}}
Zeile 78: Zeile 187:
|{{Farbe/Beispiel|grau|dunkler}}
|{{Farbe/Beispiel|grau|dunkler}}
|}
|}
== CSS Code for Common.css ==
:root {
  --zum-farbe-Hervorhebung1  : {{Farbe|Hervorhebung1  }};
  --zum-farbe-Frage          : {{Farbe|Frage          }};
  --zum-farbe-Lernpfad        : {{Farbe|Lernpfad        }};
  --zum-farbe-Hervorhebung2  : {{Farbe|Hervorhebung2  }};
  --zum-farbe-Merksatz        : {{Farbe|Merksatz        }};
  --zum-farbe-Üben            : {{Farbe|Üben            }};
  --zum-farbe-Ueben          : {{Farbe|Üben            }};
  --zum-farbe-Arbeitsmethode  : {{Farbe|Arbeitsmethode  }};
  --zum-farbe-Unterrichtsidee : {{Farbe|Unterrichtsidee }};
  --zum-farbe-Experimentieren : {{Farbe|Experimentieren }};
  --zum-farbe-Arbeitsmethode  : {{Farbe|Arbeitsmethode  }};
  --zum-farbe-Unterrichtsidee : {{Farbe|Unterrichtsidee }};
  --zum-farbe-Experimentieren : {{Farbe|Experimentieren }};
  --zum-farbe-Meinung        : {{Farbe|Meinung        }};
  --zum-farbe-Lösung          : {{Farbe|Lösung          }};
  --zum-farbe-Loesung        : {{Farbe|Lösung          }};
  --zum-farbe-Download        : {{Farbe|Download        }};
  --zum-farbe-Kurzinfo        : {{Farbe|Kurzinfo        }};
  --zum-farbe-Zitat          : {{Farbe|Zitat          }};
 
 
  --zum-farbe-primär                  : {{Farbe|primär                  }};
  --zum-farbe-primär---xx-heller      : {{Farbe|primär        |xx-heller}};
  --zum-farbe-primär---x-heller        : {{Farbe|primär        |x-heller }};
  --zum-farbe-primär---heller          : {{Farbe|primär        |heller  }};
  --zum-farbe-primär---hell            : {{Farbe|primär        |hell    }};
  --zum-farbe-primär---dunkel          : {{Farbe|primär        |dunkel  }};
  --zum-farbe-primär---dunkler        : {{Farbe|primär        |dunkler  }};
  --zum-farbe-sekundär-1              : {{Farbe|sekundär-1              }};
  --zum-farbe-sekundär-1--xx-heller    : {{Farbe|sekundär-1    |xx-heller}};
  --zum-farbe-sekundär-1--x-heller    : {{Farbe|sekundär-1    |x-heller }};
  --zum-farbe-sekundär-1--heller      : {{Farbe|sekundär-1    |heller  }};
  --zum-farbe-sekundär-1--hell        : {{Farbe|sekundär-1    |hell    }};
  --zum-farbe-sekundär-1--dunkel      : {{Farbe|sekundär-1    |dunkel  }};
  --zum-farbe-sekundär-1--dunkler      : {{Farbe|sekundär-1    |dunkler  }};
  --zum-farbe-sekundär-2              : {{Farbe|sekundär-2              }};
  --zum-farbe-sekundär-2--xx-heller    : {{Farbe|sekundär-2    |xx-heller}};
  --zum-farbe-sekundär-2--x-heller    : {{Farbe|sekundär-2    |x-heller }};
  --zum-farbe-sekundär-2--heller      : {{Farbe|sekundär-2    |heller  }};
  --zum-farbe-sekundär-2--hell        : {{Farbe|sekundär-2    |hell    }};
  --zum-farbe-sekundär-2--dunkel      : {{Farbe|sekundär-2    |dunkel  }};
  --zum-farbe-sekundär-2--dunkler      : {{Farbe|sekundär-2    |dunkler  }};
  --zum-farbe-komplementär            : {{Farbe|komplementär            }};
  --zum-farbe-komplementär--xx-heller  : {{Farbe|komplementär  |xx-heller}};
  --zum-farbe-komplementär--x-heller  : {{Farbe|komplementär  |x-heller }};
  --zum-farbe-komplementär--heller    : {{Farbe|komplementär  |heller  }};
  --zum-farbe-komplementär--hell      : {{Farbe|komplementär  |hell    }};
  --zum-farbe-komplementär--dunkel    : {{Farbe|komplementär  |dunkel  }};
  --zum-farbe-komplementär--dunkler    : {{Farbe|komplementär  |dunkler  }};
  --zum-farbe-orange                  : {{Farbe|orange                  }};
  --zum-farbe-orange--xx-heller        : {{Farbe|orange        |xx-heller}};
  --zum-farbe-orange--x-heller        : {{Farbe|orange        |x-heller }};
  --zum-farbe-orange--heller          : {{Farbe|orange        |heller  }};
  --zum-farbe-orange--hell            : {{Farbe|orange        |hell    }};
  --zum-farbe-orange--dunkel          : {{Farbe|orange        |dunkel  }};
  --zum-farbe-orange--dunkler          : {{Farbe|orange        |dunkler  }};
  --zum-farbe-grün                    : {{Farbe|grün                    }};
  --zum-farbe-grün--xx-heller          : {{Farbe|grün          |xx-heller}};
  --zum-farbe-grün--x-heller          : {{Farbe|grün          |x-heller }};
  --zum-farbe-grün--heller            : {{Farbe|grün          |heller  }};
  --zum-farbe-grün--hell              : {{Farbe|grün          |hell    }};
  --zum-farbe-grün--dunkel            : {{Farbe|grün          |dunkel  }};
  --zum-farbe-grün--dunkler            : {{Farbe|grün          |dunkler  }};
  --zum-farbe-grau                    : {{Farbe|grau                    }};
  --zum-farbe-grau--xx-heller          : {{Farbe|grau          |xx-heller}};
  --zum-farbe-grau--x-heller          : {{Farbe|grau          |x-heller }};
  --zum-farbe-grau--heller            : {{Farbe|grau          |heller  }};
  --zum-farbe-grau--heller            : {{Farbe|grau          |heller  }};
  --zum-farbe-grau--heller            : {{Farbe|grau          |heller  }};
  --zum-farbe-grau--hell              : {{Farbe|grau          |hell    }};
  --zum-farbe-grau--dunkel            : {{Farbe|grau          |dunkel  }};
  --zum-farbe-grau--dunkler            : {{Farbe|grau          |dunkler  }};
  --zum-farbe-links                    : {{Farbe|links                    }};
  --zum-farbe-links--xx-heller        : {{Farbe|links          |xx-heller}};
  --zum-farbe-links--x-heller          : {{Farbe|links          |x-heller }};
  --zum-farbe-links--heller            : {{Farbe|links          |heller  }};
  --zum-farbe-links--heller            : {{Farbe|links          |heller  }};
  --zum-farbe-links--heller            : {{Farbe|links          |heller  }};
  --zum-farbe-links--hell              : {{Farbe|links          |hell    }};
  --zum-farbe-links--dunkel            : {{Farbe|links          |dunkel  }};
  --zum-farbe-links--dunkler          : {{Farbe|links          |dunkler  }};
}
/* Bedeutungsfarben */
.zum-farbe-Hervorhebung1  { color:{{Farbe|Hervorhebung1  }}; }
.zum-farbe-Frage          { color:{{Farbe|Frage          }}; }
.zum-farbe-Lernpfad        { color:{{Farbe|Lernpfad        }}; }
.zum-farbe-Hervorhebung2  { color:{{Farbe|Hervorhebung2  }}; }
.zum-farbe-Merksatz        { color:{{Farbe|Merksatz        }}; }
.zum-farbe-Üben,
.zum-farbe-Ueben          { color:{{Farbe|Üben            }}; }
.zum-farbe-Arbeitsmethode  { color:{{Farbe|Arbeitsmethode  }}; }
.zum-farbe-Unterrichtsidee { color:{{Farbe|Unterrichtsidee }}; }
.zum-farbe-Experimentieren { color:{{Farbe|Experimentieren }}; }
.zum-farbe-Arbeitsmethode  { color:{{Farbe|Arbeitsmethode  }}; }
.zum-farbe-Unterrichtsidee { color:{{Farbe|Unterrichtsidee }}; }
.zum-farbe-Experimentieren { color:{{Farbe|Experimentieren }}; }
.zum-farbe-Meinung        { color:{{Farbe|Meinung        }}; }
.zum-farbe-Lösung,
.zum-farbe-Loesung        { color:{{Farbe|Lösung          }}; }
.zum-farbe-Download        { color:{{Farbe|Download        }}; }
.zum-farbe-Kurzinfo        { color:{{Farbe|Kurzinfo        }}; }
.zum-farbe-Zitat          { color:{{Farbe|Zitat          }}; }
.zum-hintergrund-Hervorhebung1  { background-color:{{Farbe|Hervorhebung1  }}; }
.zum-hintergrund-Frage          { background-color:{{Farbe|Frage          }}; }
.zum-hintergrund-Lernpfad        { background-color:{{Farbe|Lernpfad        }}; }
.zum-hintergrund-Hervorhebung2  { background-color:{{Farbe|Hervorhebung2  }}; }
.zum-hintergrund-Merksatz        { background-color:{{Farbe|Merksatz        }}; }
.zum-hintergrund-Üben,
.zum-hintergrund-Ueben          { background-color:{{Farbe|Üben            }}; }
.zum-hintergrund-Arbeitsmethode  { background-color:{{Farbe|Arbeitsmethode  }}; }
.zum-hintergrund-Unterrichtsidee { background-color:{{Farbe|Unterrichtsidee }}; }
.zum-hintergrund-Experimentieren { background-color:{{Farbe|Experimentieren }}; }
.zum-hintergrund-Arbeitsmethode  { background-color:{{Farbe|Arbeitsmethode  }}; }
.zum-hintergrund-Unterrichtsidee { background-color:{{Farbe|Unterrichtsidee }}; }
.zum-hintergrund-Experimentieren { background-color:{{Farbe|Experimentieren }}; }
.zum-hintergrund-Meinung        { background-color:{{Farbe|Meinung        }}; }
.zum-hintergrund-Lösung,
.zum-hintergrund-Loesung        { background-color:{{Farbe|Lösung          }}; }
.zum-hintergrund-Download        { background-color:{{Farbe|Download        }}; }
.zum-hintergrund-Kurzinfo        { background-color:{{Farbe|Kurzinfo        }}; }
.zum-hintergrund-Zitat          { background-color:{{Farbe|Zitat          }}; } 
/* komplettes Farbschema */
.zum-farbe-primär                            { color: {{Farbe|primär                  }}; }
.zum-farbe-primär.zum-farbe-xx-heller        { color: {{Farbe|primär        |xx-heller}}; }
.zum-farbe-primär.zum-farbe-x-heller        { color: {{Farbe|primär        |x-heller }}; }
.zum-farbe-primär.zum-farbe-heller          { color: {{Farbe|primär        |heller  }}; }
.zum-farbe-primär.zum-farbe-hell            { color: {{Farbe|primär        |hell    }}; }
.zum-farbe-primär.zum-farbe-dunkel          { color: {{Farbe|primär        |dunkel  }}; }
.zum-farbe-primär.zum-farbe-dunkler          { color: {{Farbe|primär        |dunkler  }}; }
.zum-farbe-sekundär-1                        { color: {{Farbe|sekundär-1              }}; }
.zum-farbe-sekundär-1.zum-farbe-xx-heller    { color: {{Farbe|sekundär-1    |xx-heller}}; }
.zum-farbe-sekundär-1.zum-farbe-x-heller    { color: {{Farbe|sekundär-1    |x-heller }}; }
.zum-farbe-sekundär-1.zum-farbe-heller      { color: {{Farbe|sekundär-1    |heller  }}; }
.zum-farbe-sekundär-1.zum-farbe-hell        { color: {{Farbe|sekundär-1    |hell    }}; }
.zum-farbe-sekundär-1.zum-farbe-dunkel      { color: {{Farbe|sekundär-1    |dunkel  }}; }
.zum-farbe-sekundär-1.zum-farbe-dunkler      { color: {{Farbe|sekundär-1    |dunkler  }}; }
.zum-farbe-sekundär-2                        { color: {{Farbe|sekundär-2              }}; }
.zum-farbe-sekundär-2.zum-farbe-xx-heller    { color: {{Farbe|sekundär-2    |xx-heller}}; }
.zum-farbe-sekundär-2.zum-farbe-x-heller    { color: {{Farbe|sekundär-2    |x-heller }}; }
.zum-farbe-sekundär-2.zum-farbe-heller      { color: {{Farbe|sekundär-2    |heller  }}; }
.zum-farbe-sekundär-2.zum-farbe-hell        { color: {{Farbe|sekundär-2    |hell    }}; }
.zum-farbe-sekundär-2.zum-farbe-dunkel      { color: {{Farbe|sekundär-2    |dunkel  }}; }
.zum-farbe-sekundär-2.zum-farbe-dunkler      { color: {{Farbe|sekundär-2    |dunkler  }}; }
.zum-farbe-komplementär                      { color: {{Farbe|komplementär            }}; }
.zum-farbe-komplementär.zum-farbe-xx-heller  { color: {{Farbe|komplementär  |xx-heller}}; }
.zum-farbe-komplementär.zum-farbe-x-heller  { color: {{Farbe|komplementär  |x-heller }}; }
.zum-farbe-komplementär.zum-farbe-heller    { color: {{Farbe|komplementär  |heller  }}; }
.zum-farbe-komplementär.zum-farbe-hell      { color: {{Farbe|komplementär  |hell    }}; }
.zum-farbe-komplementär.zum-farbe-dunkel    { color: {{Farbe|komplementär  |dunkel  }}; }
.zum-farbe-komplementär.zum-farbe-dunkler    { color: {{Farbe|komplementär  |dunkler  }}; }
.zum-farbe-orange                            { color: {{Farbe|orange                  }}; }
.zum-farbe-orange.zum-farbe-xx-heller        { color: {{Farbe|orange        |xx-heller}}; }
.zum-farbe-orange.zum-farbe-x-heller        { color: {{Farbe|orange        |x-heller }}; }
.zum-farbe-orange.zum-farbe-heller          { color: {{Farbe|orange        |heller  }}; }
.zum-farbe-orange.zum-farbe-hell            { color: {{Farbe|orange        |hell    }}; }
.zum-farbe-orange.zum-farbe-dunkel          { color: {{Farbe|orange        |dunkel  }}; }
.zum-farbe-orange.zum-farbe-dunkler          { color: {{Farbe|orange        |dunkler  }}; }
.zum-farbe-grün                              { color: {{Farbe|grün                    }}; }
.zum-farbe-grün.zum-farbe-xx-heller          { color: {{Farbe|grün          |xx-heller}}; }
.zum-farbe-grün.zum-farbe-x-heller          { color: {{Farbe|grün          |x-heller }}; }
.zum-farbe-grün.zum-farbe-heller            { color: {{Farbe|grün          |heller  }}; }
.zum-farbe-grün.zum-farbe-hell              { color: {{Farbe|grün          |hell    }}; }
.zum-farbe-grün.zum-farbe-dunkel            { color: {{Farbe|grün          |dunkel  }}; }
.zum-farbe-grün.zum-farbe-dunkler            { color: {{Farbe|grün          |dunkler  }}; }
.zum-farbe-grau                              { color: {{Farbe|grau                    }}; }
.zum-farbe-grau.zum-farbe-xx-heller          { color: {{Farbe|grau          |xx-heller}}; }
.zum-farbe-grau.zum-farbe-x-heller          { color: {{Farbe|grau          |x-heller }}; }
.zum-farbe-grau.zum-farbe-heller            { color: {{Farbe|grau          |heller  }}; }
.zum-farbe-grau.zum-farbe-heller            { color: {{Farbe|grau          |heller  }}; }
.zum-farbe-grau.zum-farbe-heller            { color: {{Farbe|grau          |heller  }}; }
.zum-farbe-grau.zum-farbe-hell              { color: {{Farbe|grau          |hell    }}; }
.zum-farbe-grau.zum-farbe-dunkel            { color: {{Farbe|grau          |dunkel  }}; }
.zum-farbe-grau.zum-farbe-dunkler            { color: {{Farbe|grau          |dunkler  }}; }
.zum-farbe-links                            { color: {{Farbe|links                    }}; }
.zum-farbe-links.zum-farbe-xx-heller        { color: {{Farbe|links          |xx-heller}}; }
.zum-farbe-links.zum-farbe-x-heller          { color: {{Farbe|links          |x-heller }}; }
.zum-farbe-links.zum-farbe-heller            { color: {{Farbe|links          |heller  }}; }
.zum-farbe-links.zum-farbe-heller            { color: {{Farbe|links          |heller  }}; }
.zum-farbe-links.zum-farbe-heller            { color: {{Farbe|links          |heller  }}; }
.zum-farbe-links.zum-farbe-hell              { color: {{Farbe|links          |hell    }}; }
.zum-farbe-links.zum-farbe-dunkel            { color: {{Farbe|links          |dunkel  }}; }
.zum-farbe-links.zum-farbe-dunkler          { color: {{Farbe|links          |dunkler  }}; }
.
.zum-hintergrund-primär                            { background-color: {{Farbe|primär                  }}; }
.zum-hintergrund-primär.zum-farbe-xx-heller        { background-color: {{Farbe|primär        |xx-heller}}; }
.zum-hintergrund-primär.zum-farbe-x-heller        { background-color: {{Farbe|primär        |x-heller }}; }
.zum-hintergrund-primär.zum-farbe-heller          { background-color: {{Farbe|primär        |heller  }}; }
.zum-hintergrund-primär.zum-farbe-hell            { background-color: {{Farbe|primär        |hell    }}; }
.zum-hintergrund-primär.zum-farbe-dunkel          { background-color: {{Farbe|primär        |dunkel  }}; }
.zum-hintergrund-primär.zum-farbe-dunkler          { background-color: {{Farbe|primär        |dunkler  }}; }
.zum-hintergrund-sekundär-1                        { background-color: {{Farbe|sekundär-1              }}; }
.zum-hintergrund-sekundär-1.zum-farbe-xx-heller    { background-color: {{Farbe|sekundär-1    |xx-heller}}; }
.zum-hintergrund-sekundär-1.zum-farbe-x-heller    { background-color: {{Farbe|sekundär-1    |x-heller }}; }
.zum-hintergrund-sekundär-1.zum-farbe-heller      { background-color: {{Farbe|sekundär-1    |heller  }}; }
.zum-hintergrund-sekundär-1.zum-farbe-hell        { background-color: {{Farbe|sekundär-1    |hell    }}; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkel      { background-color: {{Farbe|sekundär-1    |dunkel  }}; }
.zum-hintergrund-sekundär-1.zum-farbe-dunkler      { background-color: {{Farbe|sekundär-1    |dunkler  }}; }
.zum-hintergrund-sekundär-2                        { background-color: {{Farbe|sekundär-2              }}; }
.zum-hintergrund-sekundär-2.zum-farbe-xx-heller    { background-color: {{Farbe|sekundär-2    |xx-heller}}; }
.zum-hintergrund-sekundär-2.zum-farbe-x-heller    { background-color: {{Farbe|sekundär-2    |x-heller }}; }
.zum-hintergrund-sekundär-2.zum-farbe-heller      { background-color: {{Farbe|sekundär-2    |heller  }}; }
.zum-hintergrund-sekundär-2.zum-farbe-hell        { background-color: {{Farbe|sekundär-2    |hell    }}; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkel      { background-color: {{Farbe|sekundär-2    |dunkel  }}; }
.zum-hintergrund-sekundär-2.zum-farbe-dunkler      { background-color: {{Farbe|sekundär-2    |dunkler  }}; }
.zum-hintergrund-komplementär                      { background-color: {{Farbe|komplementär            }}; }
.zum-hintergrund-komplementär.zum-farbe-xx-heller  { background-color: {{Farbe|komplementär  |xx-heller}}; }
.zum-hintergrund-komplementär.zum-farbe-x-heller  { background-color: {{Farbe|komplementär  |x-heller }}; }
.zum-hintergrund-komplementär.zum-farbe-heller    { background-color: {{Farbe|komplementär  |heller  }}; }
.zum-hintergrund-komplementär.zum-farbe-hell      { background-color: {{Farbe|komplementär  |hell    }}; }
.zum-hintergrund-komplementär.zum-farbe-dunkel    { background-color: {{Farbe|komplementär  |dunkel  }}; }
.zum-hintergrund-komplementär.zum-farbe-dunkler    { background-color: {{Farbe|komplementär  |dunkler  }}; }
.zum-hintergrund-orange                            { background-color: {{Farbe|orange                  }}; }
.zum-hintergrund-orange.zum-farbe-xx-heller        { background-color: {{Farbe|orange        |xx-heller}}; }
.zum-hintergrund-orange.zum-farbe-x-heller        { background-color: {{Farbe|orange        |x-heller }}; }
.zum-hintergrund-orange.zum-farbe-heller          { background-color: {{Farbe|orange        |heller  }}; }
.zum-hintergrund-orange.zum-farbe-hell            { background-color: {{Farbe|orange        |hell    }}; }
.zum-hintergrund-orange.zum-farbe-dunkel          { background-color: {{Farbe|orange        |dunkel  }}; }
.zum-hintergrund-orange.zum-farbe-dunkler          { background-color: {{Farbe|orange        |dunkler  }}; }
.zum-hintergrund-grün                              { background-color: {{Farbe|grün                    }}; }
.zum-hintergrund-grün.zum-farbe-xx-heller          { background-color: {{Farbe|grün          |xx-heller}}; }
.zum-hintergrund-grün.zum-farbe-x-heller          { background-color: {{Farbe|grün          |x-heller }}; }
.zum-hintergrund-grün.zum-farbe-heller            { background-color: {{Farbe|grün          |heller  }}; }
.zum-hintergrund-grün.zum-farbe-hell              { background-color: {{Farbe|grün          |hell    }}; }
.zum-hintergrund-grün.zum-farbe-dunkel            { background-color: {{Farbe|grün          |dunkel  }}; }
.zum-hintergrund-grün.zum-farbe-dunkler            { background-color: {{Farbe|grün          |dunkler  }}; }
.zum-hintergrund-grau                              { background-color: {{Farbe|grau                    }}; }
.zum-hintergrund-grau.zum-farbe-xx-heller          { background-color: {{Farbe|grau          |xx-heller}}; }
.zum-hintergrund-grau.zum-farbe-x-heller          { background-color: {{Farbe|grau          |x-heller }}; }
.zum-hintergrund-grau.zum-farbe-heller            { background-color: {{Farbe|grau          |heller  }}; }
.zum-hintergrund-grau.zum-farbe-hell              { background-color: {{Farbe|grau          |hell    }}; }
.zum-hintergrund-grau.zum-farbe-dunkel            { background-color: {{Farbe|grau          |dunkel  }}; }
.zum-hintergrund-grau.zum-farbe-dunkler            { background-color: {{Farbe|grau          |dunkler  }}; }
.zum-hintergrund-links                            { background-color: {{Farbe|links                    }}; }
.zum-hintergrund-links.zum-farbe-xx-heller        { background-color: {{Farbe|links          |xx-heller}}; }
.zum-hintergrund-links.zum-farbe-x-heller          { background-color: {{Farbe|links          |x-heller }}; }
.zum-hintergrund-links.zum-farbe-heller            { background-color: {{Farbe|links          |heller  }}; }
.zum-hintergrund-links.zum-farbe-hell              { background-color: {{Farbe|links          |hell    }}; }
.zum-hintergrund-links.zum-farbe-dunkel            { background-color: {{Farbe|links          |dunkel  }}; }
.zum-hintergrund-links.zum-farbe-dunkler          { background-color: {{Farbe|links          |dunkler  }}; }
 
/* overrides
  * uses mediawiki parent selector to establish override
  */
.mediawiki .box.hervorhebung1  { border-left-color:{{Farbe|Hervorhebung1  }}; }
.mediawiki .box.frage          { border-left-color:{{Farbe|Frage          }}; }
.mediawiki .box.lernpfad        { border-left-color:{{Farbe|Lernpfad        }}; }
.mediawiki .box.hervorhebung2  { border-left-color:{{Farbe|Hervorhebung2  }}; }
.mediawiki .box.merksatz        { border-left-color:{{Farbe|Merksatz        }}; }
.mediawiki .box.üben,
.mediawiki .box.ueben          { border-left-color:{{Farbe|Üben            }}; }
.mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
.mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
.mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
.mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
.mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
.mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
.mediawiki .box.meinung        { border-left-color:{{Farbe|Meinung        }}; }
.mediawiki .box.lösung,
.mediawiki .box.loesung        { border-left-color:{{Farbe|Lösung          }}; }
.mediawiki .box.download        { border-left-color:{{Farbe|Download        }}; }
.mediawiki .box.kurzinfo        { border-left-color:{{Farbe|Kurzinfo        }}; }
.mediawiki .box.zitat          { border-left-color:{{Farbe|Zitat          }}; }
.mediawiki .button-left a,
.mediawiki .button-center a,
.mediawiki .button-right a      { background-color: {{Farbe|grau      }};      }
.mediawiki .button-left a:hover, 
.mediawiki .button-left a:focus,
.mediawiki .button-center a:hover,
.mediawiki .button-center a:focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus          { background-color: {{Farbe|grau|hell  }};    }
.mediawiki .button-left.button-primary a,
.mediawiki .button-center.button-primary a,
.mediawiki .button-right.button-primary a  { background-color: {{Farbe|links|dunkel}};    }
.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-right.button-primary a:hover
.mediawiki .button-right.button-primary a:focus { background-color: {{Farbe|links|hell}};  }
.mediawiki .uk-text-muted        { color: {{Farbe|grau|dunkler    }} !important; }
.mediawiki .uk-text-primary      { color: {{Farbe|sekundär-2|dunkel}} !important; }
.mediawiki .uk-text-success      { color: {{Farbe|grün|dunkler    }} !important; }
.mediawiki .uk-text-warning      { color: {{Farbe|orange|dunkler  }} !important; }
.mediawiki .uk-text-danger        { color: {{Farbe|sekundär-1|dunkel}} !important; }
.mediawiki .uk-text-contrast      { color: #fff !important;    }
.mediawiki .uk-button            { background-color: {{Farbe|grau            }}; }
.mediawiki .uk-button:hover,
.mediawiki .uk-button:focus      { background-color: {{Farbe|grau|hell        }}; }
.mediawiki .uk-button.uk-active,
.mediawiki .uk-button:active      { background-color: {{Farbe|grau|heller      }}; }
.mediawiki .uk-button-primary        { background-color: {{Farbe|links|dunkel    }}; }
.mediawiki .uk-button-primary:hover,
.mediawiki .uk-button-primary:focus  { background-color: {{Farbe|links            }}; }
.mediawiki .uk-button-primary.uk-active,
.mediawiki .uk-button-primary:active { background-color: {{Farbe|links|hell      }}; }
.mediawiki .uk-button-success        { background-color: {{Farbe|grün|dunkler    }}; }
.mediawiki .uk-button-success:hover,
.mediawiki .uk-button-success:focus  { background-color: {{Farbe|grün|dunkel      }}; }
.mediawiki .uk-button-success.uk-active,
.mediawiki .uk-button-success:active { background-color: {{Farbe|grün            }}; }
.mediawiki .uk-button-danger        { background-color: {{Farbe|sekundär-1|dunkel }}; }
.mediawiki .uk-button-danger:hover,
.mediawiki .uk-button-danger:focus  { background-color: {{Farbe|sekundär-1|      }}; }
.mediawiki .uk-button-danger.uk-active,
.mediawiki .uk-button-danger:active { background-color: {{Farbe|sekundär-1|hell  }}; }
.mediawiki .uk-button-link        { color: {{Farbe|links|dunkel }}; }
.mediawiki .uk-button-link:hover,
.mediawiki .uk-button-link:focus,
.mediawiki .uk-button-link.uk-active,
.mediawiki .uk-button-link:active { color: {{Farbe|links|      }}; }
.mediawiki .uk-button:disabled      { background-color: {{Farbe|grau|hell    }}; }
.mediawiki .uk-button-link:disabled {            color: {{Farbe|grau|hell    }}; }
</noinclude>
</noinclude>

Aktuelle Version vom 16. Februar 2024, 07:05 Uhr


Die Vorlage Farbe gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.

Es gibt sowohl Farbnamen mit Bedeutung als auch das vollständige Farbschema. Die Vorlage verwendet bis zu 2 Parameter. Der erste Parameter ist der Farbname, der zweite kann verwendet werden um hellere oder dunklere Töne zu erhalten.

Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.

Farbnamen mit Bedeutung
Hervorhebung1, Frage, Lernpfad, Hervorhebung2, Merksatz, Üben, Arbeitsmethode, Unterrichtsidee, Experimentieren, Arbeitsmethode, Unterrichtsidee, Experimentieren, Meinung, Lösung, Download, Kurzinfo, Zitat
Farbnamen aus dem Farbschema
primär, sekundär-1, sekundär-2, komplementär, orange, grün, grau
Helligkeitsangaben
heller, hell, dunkel, dunkler

Beispiele

einfache Farbe mit Bedeutung 
 {{Farbe|Merksatz}}
#C64285

einfache Farbe aus Schema mit Helligkeitsangabe 
 {{Farbe|komplementär|heller}}
#A592D7


Verwendung über CSS-Klasse für Farbe mit Bedeutung 
 <span class="zum-farbe-Merksatz">Text in Farbe ''Merksatz''</span>
Text in Farbe Merksatz

Verwendung über CSS-Klasse zum Icon Färben 
 <span class="zum-farbe-Merksatz brainy hdg-school uk-icon-large"></span>


Farbtabellen

Farben mit Bedeutung

Hervorhebung1 #F1D850

{{Farbe |Hervorhebung1}}

Frage #F1D850

{{Farbe |Frage}}

Lernpfad #F19D50

{{Farbe |Lernpfad}}

Hervorhebung2 #C64285

{{Farbe |Hervorhebung2}}

Merksatz #C64285

{{Farbe |Merksatz}}

Üben #338894

{{Farbe |Üben}}

Arbeitsmethode #5E43A5

{{Farbe |Arbeitsmethode}}

Unterrichtsidee #A8DF4A

{{Farbe |Unterrichtsidee}}

Experimentieren #A8DF4A

{{Farbe |Experimentieren}}

Meinung #DBDBDB

{{Farbe |Meinung}}

Lösung #DBDBDB

{{Farbe |Lösung}}

Download #DBDBDB

{{Farbe |Download}}

Kurzinfo #DBDBDB

{{Farbe |Kurzinfo}}

Zitat #a0a0a0

{{Farbe |Zitat}}

Farbschema

primär #fffcf0

{{Farbe |primär |xx-heller}}

#fff6cc

{{Farbe |primär |x-heller}}

#FFF0A2

{{Farbe |primär |heller}}

#FFEA77

{{Farbe |primär |hell}}

#F1D850

{{Farbe |primär}}

#DEC229

{{Farbe |primär |dunkel}}

#AF9612

{{Farbe |primär |dunkler}}

sekundär-1 #f7d9e8

{{Farbe |sekundär-1 |xx-heller}}

#f1bbd6

{{Farbe |sekundär-1 |x-heller}}

#E994BF

{{Farbe |sekundär-1 |heller}}

#D965A0

{{Farbe |sekundär-1 |hell}}

#C64285

{{Farbe |sekundär-1}}

#B6226D

{{Farbe |sekundär-1 |dunkel}}

#900F50

{{Farbe |sekundär-1 |dunkler}}

sekundär-2 #c4e3e8

{{Farbe |sekundär-2 |xx-heller}}

#a7d6dd

{{Farbe |sekundär-2 |x-heller}}

#85C5CF

{{Farbe |sekundär-2 |heller}}

#52A1AD

{{Farbe |sekundär-2 |hell}}

#338894

{{Farbe |sekundär-2}}

#1B7A88

{{Farbe |sekundär-2 |dunkel}}

#0D5F6B

{{Farbe |sekundär-2 |dunkler}}

komplementär #dad2ee

{{Farbe |komplementär |xx-heller}}

#c2b5e3

{{Farbe |komplementär |x-heller}}

#A592D7

{{Farbe |komplementär |heller}}

#7B63BC

{{Farbe |komplementär |hell}}

#5E43A5

{{Farbe |komplementär}}

#482998

{{Farbe |komplementär |dunkel}}

#331878

{{Farbe |komplementär |dunkler}}

orange #fffcfa

{{Farbe |orange |xx-heller}}

#ffe7d1

{{Farbe |orange |x-heller}}

#FFCEA2

{{Farbe |orange |heller}}

#FFB877

{{Farbe |orange |hell}}

#F19D50

{{Farbe |orange}}

#DD7F28

{{Farbe |orange |dunkel}}

#AE5D12

{{Farbe |orange |dunkler}}

grün #f7fdec

{{Farbe |grün |xx-heller}}

#e6fac7

{{Farbe |grün |x-heller}}

#D4F69C

{{Farbe |grün |heller}}

#C0EF6F

{{Farbe |grün |hell}}

#A8DF4A

{{Farbe |grün}}

#8FCD25

{{Farbe |grün |dunkel}}

#6CA111

{{Farbe |grün |dunkler}}

links #f5faff

{{Farbe |links |xx-heller}}

#cce7ff

{{Farbe |links |x-heller}}

#47a9ff

{{Farbe |links |heller}}

#1492ff

{{Farbe |links |hell}}

#0077dd

{{Farbe |links}}

#0068bd

{{Farbe |links |dunkel}}

#005599

{{Farbe |links |dunkler}}

grau #fcfcfc

{{Farbe |grau |xx-heller}}

#f7f7f7

{{Farbe |grau |x-heller}}

#F1F1F1

{{Farbe |grau |heller}}

#ececec

{{Farbe |grau |hell}}

#DBDBDB

{{Farbe |grau}}

#C8C8C8

{{Farbe |grau |dunkel}}

#a0a0a0

{{Farbe |grau |dunkler}}

CSS Code for Common.css

: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:#a0a0a0; }

.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: #FFF0A2; }
.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: #FFF0A2; }
.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; } 

.mediawiki .button-left a,
.mediawiki .button-center a,
.mediawiki .button-right a      { background-color: #DBDBDB;      }

.mediawiki .button-left a:hover,   
.mediawiki .button-left a:focus,
.mediawiki .button-center a:hover, 
.mediawiki .button-center a:focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus           { background-color: #ececec;     }

.mediawiki .button-left.button-primary a,
.mediawiki .button-center.button-primary a,
.mediawiki .button-right.button-primary a  { background-color: #0068bd;     }

.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-right.button-primary a:hover
.mediawiki .button-right.button-primary a:focus { background-color: #1492ff;  }

.mediawiki .uk-text-muted         { color: #a0a0a0 !important; }
.mediawiki .uk-text-primary       { color: #1B7A88 !important; }
.mediawiki .uk-text-success       { color: #6CA111 !important; }
.mediawiki .uk-text-warning       { color: #AE5D12 !important; }
.mediawiki .uk-text-danger        { color: #B6226D !important; }
.mediawiki .uk-text-contrast      { color: #fff !important;    }

.mediawiki .uk-button             { background-color: #DBDBDB; }
.mediawiki .uk-button:hover,
.mediawiki .uk-button:focus       { background-color: #ececec; }
.mediawiki .uk-button.uk-active,
.mediawiki .uk-button:active      { background-color: #F1F1F1; }

.mediawiki .uk-button-primary        { background-color: #0068bd; }
.mediawiki .uk-button-primary:hover,
.mediawiki .uk-button-primary:focus  { background-color: #0077dd; }
.mediawiki .uk-button-primary.uk-active,
.mediawiki .uk-button-primary:active { background-color: #1492ff; }

.mediawiki .uk-button-success        { background-color: #6CA111; }
.mediawiki .uk-button-success:hover,
.mediawiki .uk-button-success:focus  { background-color: #8FCD25; }
.mediawiki .uk-button-success.uk-active,
.mediawiki .uk-button-success:active { background-color: #A8DF4A; }

.mediawiki .uk-button-danger        { background-color: #B6226D; }
.mediawiki .uk-button-danger:hover,
.mediawiki .uk-button-danger:focus  { background-color: #C64285; }
.mediawiki .uk-button-danger.uk-active,
.mediawiki .uk-button-danger:active { background-color: #D965A0; }

.mediawiki .uk-button-link        { color: #0068bd; }
.mediawiki .uk-button-link:hover,
.mediawiki .uk-button-link:focus,
.mediawiki .uk-button-link.uk-active,
.mediawiki .uk-button-link:active { color: #0077dd; }


.mediawiki .uk-button:disabled      { background-color: #ececec; }
.mediawiki .uk-button-link:disabled {            color: #ececec; }
Abgerufen von „https://unterrichten.zum.de/index.php?title=Vorlage:Farbe&oldid=137030“