Die Farben sowie die Grösse des Micromate-Widgets können sehr einfach über CSS Custom Properties (CSS Variables) angepasst werden. Die Variablen können an beliebiger Stelle gesetzt werden:
Styling
Die CSS Custom Properties können an einer beliebigen Stelle im Frontend der Webapplikation in welchem das Widget integriert werden gesetzt werden.
:root {
--micromate-font: monospace;
--micromate-color-primary: green;
--micromate-color-widget: red;
}
Beispiel:
Möglichkeiten
Die folgenden Variablen stehen zur Verfügung:
Name | Beschreibung | Standard-Wert |
|---|---|---|
--micromate-font | Schriftart | "Open Sans", sans-serif |
--micromate-color-primary | Hauptfarbe innerhalb des Chats | #facb72 |
--micromate-color-widget | Farbe des Widget-Headers | #334455 |
--micromate-size-minimized-height | Höhe im minimierten Zustand | 640px |
--micromate-size-minimized-width | Breite im minimierten Zustand | 520px |