Styles

The Biel.ai button is highly customizable, allowing you to customize its appearance to suit your application's needs. This reference document lists all the available CSS custom properties that can be overridden to match your website's design.

Usage

To customize these properties, define them in your website's CSS using the :root selector for global changes or a specific selector to target particular areas:

:root {
    --biel-primary-color: #00D68F;
    ...
}

Properties

The tables below lists all the available properties you can override:

:root {
    /* Colors */
    --biel-primary-color: #0070F4;
    --biel-primary-light-color: #3a99ff;
    --biel-secondary-color: #f1f3f4;
    --biel-light-color: #ccc;
    --biel-dark-color: #191919;
    --biel-dark-hover-color: #333;
    --biel-text-color: #5f6368;
    --biel-white-color: #fff;
    --biel-white-hover-color: #eee;
    --biel-highlight-color: #ffb422;
    --biel-scrollbar-color: #888888;
    --biel-scrollbar-hover-color: #666666;
    --code-snippet-header-color: #3a3a3a;
    --biel-message-source-color: #3b3b3b;
    --biel-message-source-hover-color: #303030;
    --biel-table-header-color: #2b2b2b;


    /* Fonts */
    --biel-font-family: "Inter", "Tahoma", "sans-serif";
    --biel-text-font-size: 14px;
    --biel-text-lg-font-size: 16px;
    --biel-text-xl-font-size: 18px;
    --code-snippet-font-family: "Courier New", "Courier", "monospace";

    /* Biel button */
    --biel-button-border-radius: 20px;
    --biel-button-dark-bg-color: var(--biel-primary-color);
    --biel-button-dark-text-color: var(--biel-white-color);
    --biel-button-icon-size: 20px;
    --biel-button-light-bg-color: var(--biel-white-color);
    --biel-button-light-text-color: var(--biel-primary-color);
    --biel-button-text-font-size: var(--biel-text-lg-font-size);
    --biel-button-text-font-weight: 400;
    --biel-button-z-index: 300;

    /* Biel bot */
    --biel-bot-close-bg-color: var(--biel-white-color);
    --biel-bot-close-color: var(--biel-dark-color);
    --biel-bot-content-bg-color: var(--biel-white-color);
    --biel-bot-content-border-color: var(--biel-light-color);
    --biel-bot-content-border-radius: 8px;
    --biel-bot-content-font-family: var(--biel-font-family);
    --biel-bot-content-position-bottom: 10px;
    --biel-bot-content-position-left: 10px;
    --biel-bot-content-position-right: 10px;
    --biel-bot-content-position-top: 10px;
    --biel-bot-content-text-color: var(--biel-text-color);
    --biel-bot-content-z-index: 300;

    /* Biel input */
    --biel-input-color: var(--biel-dark-color);
    --biel-input-border-color: var(--biel-dark-color);
    --biel-input-button-color: var(--biel-white-color);
    --biel-input-button-bg-color: var(--biel-dark-color);
    --biel-input-button-hover-bg-color: var(--biel-dark-hover-color);
    --biel-input-border-radius: 6px;
    --biel-input-font-family: var(--biel-font-family);
    --biel-input-textarea-max-height: 102px;
    --biel-input-textarea-min-height: 17px;

    /* Biel message */
    --biel-message-biel-text-color: var(--biel-white-color);
    --biel-message-user-text-color: var(--biel-white-color);
    --biel-message-biel-background-color: var(--biel-dark-color);
    --biel-message-user-background-color: var(--biel-primary-color);
    --biel-message-avatar-width: 20px;
    --biel-message-avatar-height: 20px;
    --biel-message-padding: 10px;
    --biel-message-avatar-margin-right: 10px;
    --biel-message-border-radius: 10px;
    --biel-message-source-font-size: 14px;
    --biel-message-source-background-color: var(--biel-message-source-color);
    --biel-message-source-background-hover-color: var(--biel-message-source-hover-color);
    --biel-message-link-color: var(--biel-primary-light-color);

    /* Biel chat */
    --biel-chat-scrollbar-color: var(--biel-scrollbar-color);
    --biel-chat-scrollbar-hover-color: var(--biel-scrollbar-hover-color);
    --biel-chat-height: 45vh;

    /* Biel header */
    --biel-header-font-family: var(--biel-font-family);
    --biel-header-font-size: var(--biel-text-xl-font-size);
    --biel-header-font-weight: 600;
    --biel-header-powered-by-font-weight: 400;
    --biel-header-powered-by-text-color: var(--biel-text-color);
    --biel-header-powered-by-link-color: var(--biel-dark-color);
    --biel-header-text-color: var(--biel-dark-color);
    --biel-header-border-color: var(--biel-light-color);

    /* Code snippet */
    --code-snippet-header-text-color: var(--biel-text-color);
    --code-snippet-content-text-color: var(--biel-white-color);
    --code-snippet-header-bg-color: var(--code-snippet-header-color);
    --code-snippet-content-bg-color: var(--biel-dark-color);
    --code-snippet-font-size: var(--biel-text-font-size);

    /* Biel footer */
    --biel-footer-font-size: 12px;

    /* Biel table */
    --biel-table-th-bg-color: var(--biel-table-header-color);
    --biel-table-bg-color: var(--biel-dark-color);
    --biel-table-content-text-color: var(--biel-white-color);

    /* Biel suggested questions */
    --biel-suggested-questions-text-color: var(--biel-dark-color);
    --biel-suggested-questions-text-hover-color: var(--biel-white-color);
    --biel-suggested-questions-bg-color: var(--biel-white-color);
    --biel-suggested-questions-bg-hover-color: var(--biel-primary-color);
    --biel-suggested-questions-border-color: var(--biel-primary-color);    

    /* Biel feedback */
    --biel-feedback-background-color: var(--biel-message-source-color);
    --biel-feedback-background-hover-color: var(--biel-message-source-hover-color);
    --biel-feedback-background-selected-color: var(--biel-primary-color);
    --biel-feedback-text-color: var(--biel-white-color);
    --biel-feedback-text-selected-color: var(--biel-white-color);
}

[data-theme='dark'] {
    --biel-text-color: #b0b8c4;
    --biel-light-color: #363636;
    --biel-scrollbar-color: #555555;
    --biel-scrollbar-hover-color: #333333;
    --biel-message-source-color: #eee;
    --biel-message-source-hover-color: #ddd;
    --biel-bot-button-bg-color-active: transparent;
    --biel-bot-button-icon-color: var(--biel-white-color);
    --biel-bot-button-text-color: var(--biel-white-color);
    --biel-header-text-color: var(--biel-white-color);
    --biel-bot-close-bg-color: transparent;
    --biel-bot-close-color: var(--biel-white-color);
    --biel-bot-content-bg-color: var(--biel-dark-color);
    --biel-bot-content-text-color: var(--biel-text-color);
    --biel-header-powered-by-link-color: var(--biel-white-color);
    --biel-input-color: var(--biel-white-color);
    --biel-input-border-color: var(--biel-white-color);
    --biel-input-button-color: var(--biel-dark-color);
    --biel-input-button-bg-color: var(--biel-white-color);
    --biel-input-button-hover-bg-color: var(--biel-white-hover-color);
    --biel-message-biel-text-color: var(--biel-dark-color);
    --biel-message-biel-background-color: var(--biel-white-color);
    --biel-message-source-link-color: var(--biel-primary-color);
    --biel-suggested-questions-text-color: var(--biel-white-color);
    --biel-suggested-questions-bg-color: var(--biel-dark-color);
    --biel-feedback-text-color: var(--biel-dark-color);
}