Styling Ihrer eigenen Webkomponente

Design & Kernfarben

• --bbc-color-primary → Wird in Buttons, Links, Texten und mehr verwendet, um hervorzuheben und zu betonen.

• --bbc-color-secondary → Wird für Hinweise, Beschreibungen und Untertitel verwendet.

• --bbc-color-theme → Wird als standardmäßiger app-weiter Hintergrund verwendet.

• --bbc-icon-hover-color → Wird für die Symbolfarbe beim Hover verwendet.

• --bbc-button-hover-bg-color → Wird für den Button-Hintergrund beim Hover verwendet.

• --bbc-button-hover-text-color → Wird für die Button-Textfarbe beim Hover verwendet.

---

Seitenleiste (Navigation)

• --bbc-sidebar-bg-color → Hintergrundfarbe der Seitenleiste

• --bbc-sidebar-text-color → Textfarbe der Seitenleiste

• --bbc-sidebar-font-size → Schriftgröße der Seitenleiste

• --bbc-sidebar-font-weight → Schriftschnitt der Seitenleiste

• --bbc-sidebar-font-family → Schriftfamilie der Seitenleiste

Aktives Element der Seitenleiste

• --bbc-sidebar-active-item-bg-color → Hintergrund des aktiven Elements in der Seitenleiste

---

Obere Leiste

Obere Leiste

Du kannst die obere Leiste mit dem hideTopbar Parameter ausblenden.

• --bbc-top-bar-text-color → Textfarbe der oberen Leiste

• --bbc-top-bar-bg-color → Hintergrundfarbe der oberen Leiste

• --bbc-top-bar-font-family → Schriftfamilie der oberen Leiste

• --bbc-top-bar-font-weight → Schriftschnitt der oberen Leiste

• --bbc-top-bar-font-size → Schriftgröße der oberen Leiste

Zitat der Nachricht

Zitat der Nachricht

• --bbc-msg-citation-text-color → Textfarbe des Zitats

• --bbc-msg-citation-bg-color → Hintergrundfarbe des Zitats

• --bbc-msg-citation-font-family → Schriftfamilie des Zitats

• --bbc-msg-citation-font-size → Schriftgröße des Zitats

• --bbc-msg-citation-font-weight → Schriftschnitt des Zitats

• --bbc-msg-citation-py → Vertikaler Innenabstand des Zitats

• --bbc-msg-citation-px → Horizontaler Innenabstand des Zitats

• --bbc-msg-timestamp-color: #007b5e; — legt die Farbe für alle Nachrichten-Zeitstempel fest

---

Nachrichten auf dem Desktop

• Bot-Nachricht

  • --bbc-bot-msg-bg-color → Hintergrund der Bot-Nachricht

  • --bbc-bot-msg-text-color → Textfarbe der Bot-Nachricht

  • --bbc-bot-msg-font-family → Schriftfamilie des Bots

  • --bbc-bot-msg-font-size → Schriftgröße des Bots

  • --bbc-bot-msg-font-weight → Schriftschnitt des Bots

  • --bbc-bot-msg-py → Vertikaler Innenabstand des Bots

  • --bbc-bot-msg-px → Horizontaler Innenabstand des Bots

• Benutzernachricht

  • --bbc-user-msg-bg-color → Hintergrund der Benutzernachricht

  • --bbc-user-msg-text-color → Textfarbe der Benutzernachricht

  • --bbc-user-msg-font-family → Schriftfamilie des Benutzers

  • --bbc-user-msg-font-size → Schriftgröße des Benutzers

  • --bbc-user-msg-font-weight → Schriftschnitt des Benutzers

  • --bbc-user-msg-py → Vertikaler Innenabstand des Benutzers

  • --bbc-user-msg-px → Horizontaler Innenabstand des Benutzers

---

Dokumentlayout

• Titel

  • --bbc-document-title-font-size → Schriftgröße des Titels

  • --bbc-document-title-font-weight → Schriftschnitt des Titels

  • --bbc-document-title-text-color → Textfarbe des Titels

• Abschnitt

  • --bbc-document-chunk-text-color → Textfarbe des Abschnitts

  • --bbc-document-chunk-bg-color → Hintergrundfarbe des Abschnitts

  • --bbc-document-chunk-border-color: #007b5e; — steuert die Farbe des linken Rahmens von Dokumentabschnitten

---

Referenzliste & Karten

• Listentitel

  • --bbc-ref-list-title-font-size → Schriftgröße des Listentitels

  • --bbc-ref-list-title-font-weight → Schriftschnitt des Listentitels

  • --bbc-ref-list-title-text-color → Textfarbe des Listentitels

• Karte

  • --bbc-ref-list-card-border-color → Rahmenfarbe der Karte

  • --bbc-ref-list-card-border-radius → Eckenradius der Karte

  • --bbc-ref-list-card-text-color → Textfarbe der Karte

  • --bbc-ref-list-card-bg-gradient-start → Anfang des Kartenverlaufs

  • --bbc-ref-list-card-bg-gradient-stop → Ende des Kartenverlaufs

  • --bbc-ref-list-card-icon-bg-color → Hintergrund des Karten-Symbols

---

Beispielverwendung

<blockbrain-main
    style="
        /* Design & Kern */
        --bbc-color-primary: #007b5e;
        --bbc-color-hover: #007b5e;
        --bbc-color-theme: #f3f4f6;

        /* Seitenleiste */
        --bbc-color-sidebar-bg: #ffffff;
        --bbc-color-sidebar-active-item-bg: #f5f9ff;

        /* Zitat */
        --bbc-msg-citation-text-color: #000000;
        --bbc-msg-citation-font-weight: bold;

        /* Mobile Nachrichten */
        --bbc-bot-msg-sm-bg-color: #f2f2f2;
        --bbc-user-msg-sm-bg-color: #007b5e;
        --bbc-user-msg-sm-text-color: #f2f2f2;
        --bbc-user-msg-sm-px: 4px;
        --bbc-bot-msg-sm-px: 4px;
        --bbc-msg-timestamp-color: #007b5e;

        /* Dokument */
        --bbc-document-title-text-color: #313131;
        --bbc-document-chunk-bg-color: #f2f2f2;
        --bbc-document-chunk-border-color: #007b5e;

        /* Referenzliste */
        --bbc-ref-list-title-text-color: #7f7f7f;
        --bbc-ref-list-title-font-weight: 500;
        --bbc-ref-list-card-border-color: #d9d9d9;
        --bbc-ref-list-card-bg-gradient-start: #f2f2f2;
        --bbc-ref-list-card-bg-gradient-stop: #ffffff;
        --bbc-ref-list-card-icon-bg-color: #007b5e;
    "
    layout="compact"
    width="100%"
    height="90vh"
    hideTopbar
    ...
></blockbrain-main>