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;
--biel-result-color: #f9fafb;
--biel-result-hover-color: #ebebeb;
/* 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-light-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);
/* Biel search button */
--biel-search-button-border-radius: 20px;
--biel-search-button-bg-color: var(--biel-white-color);
--biel-search-button-text-color: var(--biel-text-color);
--biel-search-button-icon-size: 20px;
--biel-search-button-text-font-size: var(--biel-text-lg-font-size);
--biel-search-button-text-font-weight: 400;
--biel-search-button-z-index: 300;
/* Biel search */
--biel-search-content-bg-color: var(--biel-white-color);
--biel-search-content-border-color: var(--biel-light-color);
--biel-search-content-border-radius: 8px;
--biel-search-content-font-family: var(--biel-font-family);
--biel-search-content-position-bottom: 10px;
--biel-search-content-position-left: 10px;
--biel-search-content-position-right: 10px;
--biel-search-content-position-top: 10px;
--biel-search-content-text-color: var(--biel-dark-color);
--biel-search-content-z-index: 300;
/* Biel search input */
--biel-search-button-text-color: var(--biel-dark-color);
/* Biel search body */
--biel-search-body-max-height: 250px;
/* Biel search result */
--biel-search-result-bg-color: var(--biel-result-color);
--biel-search-result-bg-hover-color: var(--biel-result-hover-color);
--biel-search-result-border-color: var(--biel-light-color);
--biel-search-result-title-color: var(--biel-dark-color);
--biel-search-result-description-color: var(--biel-scrollbar-hover-color);
--biel-search-result-mark-color: var(--biel-primary-color);
--biel-search-button-border-color: var(--biel-light-color);
/* Biel search ask ai button */
--biel-search-ask-ai-bg-color: var(--biel-primary-color);
--biel-search-ask-ai-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-result-color: #2b2b2b;
--biel-result-hover-color: #3a3a3a;
--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);
--biel-search-button-bg-color: var(--biel-dark-color);
--biel-search-button-text-color: var(--biel-white-color);
--biel-search-button-border-color: var(--biel-primary-color);
--biel-search-content-text-color: var(--biel-text-color);
--biel-search-content-bg-color: var(--biel-dark-color);
--biel-search-content-text-color: var(--biel-text-color);
--biel-search-content-border-color: var(--biel-dark-color);
--biel-search-button-text-color: var(--biel-white-color);
--biel-search-result-border-color: var(--biel-light-color);
--biel-search-result-title-color: var(--biel-white-color);
--biel-search-result-description-color: var(--biel-text-color);
--biel-search-result-mark-color: var(--biel-primary-light-color);
--code-snippet-header-text-color: var(--biel-text-color)
}