Vorlage:Farbe: Unterschied zwischen den Versionen
Aus RMG-Wiki
rmgwiki>Christian K (primär - heller Farbe korrigiert) |
K (1 Version importiert) |
(kein Unterschied)
| |
Aktuelle Version vom 10. Dezember 2020, 21:14 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
Farbtabellen
Farben mit Bedeutung
| Hervorhebung1 | Vorlage:Farbe/Beispiel | Frage | Vorlage:Farbe/Beispiel |
|---|---|---|---|
| Lernpfad | Vorlage:Farbe/Beispiel | Hervorhebung2 | Vorlage:Farbe/Beispiel |
| Merksatz | Vorlage:Farbe/Beispiel | Üben | Vorlage:Farbe/Beispiel |
| Arbeitsmethode | Vorlage:Farbe/Beispiel | Unterrichtsidee | Vorlage:Farbe/Beispiel |
| Experimentieren | Vorlage:Farbe/Beispiel | Meinung | Vorlage:Farbe/Beispiel |
| Lösung | Vorlage:Farbe/Beispiel | Download | Vorlage:Farbe/Beispiel |
| Kurzinfo | Vorlage:Farbe/Beispiel | Zitat | Vorlage:Farbe/Beispiel |
Farbschema
CSS Code for Common.css
/* 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; }
