Stylen Sie Ihre eigene Webkomponente

Theme & Grundfarben

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

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

• --bbc-color-theme → Wird als App-weiter Standard-Hintergrund verwendet.

• --bbc-icon-hover-color → Wird für die Farbe des Symbols bei Hover verwendet.

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

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

Sidebar (Navigation)

• --bbc-sidebar-bg-color → Sidebar Hintergrundfarbe

• --bbc-sidebar-text-color → Sidebar Textfarbe

• --bbc-sidebar-font-size → Sidebar Schriftgröße

• --bbc-sidebar-font-weight → Sidebar Schriftstärke

• --bbc-sidebar-font-family → Sidebar Schriftfamilie

--bbc-sidebar-active-item-bg-color → Hintergrund des aktiven Eintrags im Sidebar

Obere Leiste

Sie können die obere Leiste mit dem Parameter hideTopbar 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 → Schriftstärke der oberen Leiste

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

Nachricht Zitat

• --bbc-msg-citation-text-color → Textfarbe für Zitate

• --bbc-msg-citation-bg-color → Hintergrundfarbe der Zitate

• --bbc-msg-citation-font-family → Schriftfamilie für Zitate

• --bbc-msg-citation-font-size → Schriftgröße der Zitate

• --bbc-msg-citation-font-weight → Schriftstärke der Zitate

• --bbc-msg-citation-py → Zitat vertikales Padding

• --bbc-msg-citation-px → Zitat horizontales Padding

Desktop Nachrichten

• Bot-Nachricht

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

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

  • --bbc-bot-msg-font-family → Schriftfamilie Bot

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

  • --bbc-bot-msg-font-weight → Bot-Schriftstärke

  • --bbc-bot-msg-py → Bot vertikales Padding

  • --bbc-bot-msg-px → Bot horizontales Padding

• Benutzer-Nachricht

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

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

  • --bbc-user-msg-font-family → Benutzer-Schriftfamilie

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

  • --bbc-user-msg-font-weight → Stärke der Benutzerschrift

  • --bbc-user-msg-py → Benutzer verticales Padding

  • --bbc-user-msg-px → Benutzer horizontales Padding

Dokumenten-Layout

• Title

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

  • --bbc-document-title-font-weight → Schriftstärke des Titels

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

• Chunk

  • --bbc-document-chunk-text-color → Chunk Textfarbe

  • --bbc-document-chunk-bg-color → Chunk Hintergrundfarbe

Referenzliste & Karten

• Listentitel

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

  • --bbc-ref-list-title-font-weight → Schriftstärke des Listentitels

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

• Karte

  • --bbc-ref-list-card-border-color → Farbe des Kartenrandes

  • --bbc-ref-list-card-border-radius → Radius der Kartenecke

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

  • --bbc-ref-list-card-bg-gradient-start → Karte Steigung Start

  • --bbc-ref-list-card-bg-gradient-stop → Karte Gradient Ende

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

Beispiel für die Verwendung

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

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

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

/* Mobile Messages */
--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;

/* Document */
--bbc-document-title-text-color: #313131;
--bbc-document-chunk-bg-color:   #f2f2f2;

/* Reference List */
--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;
"
clientId="KbotWebCom"
orgId="233513864103202013"
secretKey="…"
uid="citation-test"
userUid="tung"
layout="compact"
height="calc(90dvh - 180px)"
hideTopbar
></blockbrain-main>