58 lines
2.7 KiB
CSS
58 lines
2.7 KiB
CSS
/*
|
|
* Runtime Theme Customization for Chatwoot Web Components
|
|
*
|
|
* Consumers can override bubble styles from outside the Shadow DOM.
|
|
* Set these CSS variables on :root or any ancestor element:
|
|
*
|
|
* COLORS (RGB values without commas, e.g., "59 130 246"):
|
|
* --chatwoot-bubble-agent-bg: Agent message background
|
|
* --chatwoot-bubble-agent-text: Agent message text
|
|
* --chatwoot-bubble-user-bg: User message background
|
|
* --chatwoot-bubble-user-text: User message text
|
|
* --chatwoot-bubble-private-bg: Private note background
|
|
* --chatwoot-bubble-private-text: Private note text
|
|
* --chatwoot-bubble-bot-bg: Bot message background
|
|
* --chatwoot-bubble-bot-text: Bot message text
|
|
*
|
|
* SPACING:
|
|
* --chatwoot-bubble-spacing-ratio: Scale factor for border radius (1 = default)
|
|
*
|
|
* Example usage in consumer's CSS:
|
|
* :root {
|
|
* --chatwoot-bubble-agent-bg: 59 130 246;
|
|
* --chatwoot-bubble-user-bg: 243 244 246;
|
|
* --chatwoot-bubble-spacing-ratio: 1.5;
|
|
* }
|
|
*/
|
|
|
|
:host {
|
|
/* Colors - falls back to theme defaults from _next-colors.scss */
|
|
--bubble-agent-bg: var(--chatwoot-bubble-agent-bg, var(--solid-blue));
|
|
--bubble-agent-text: var(--chatwoot-bubble-agent-text, var(--slate-12));
|
|
--bubble-user-bg: var(--chatwoot-bubble-user-bg, var(--slate-4));
|
|
--bubble-user-text: var(--chatwoot-bubble-user-text, var(--slate-12));
|
|
--bubble-private-bg: var(--chatwoot-bubble-private-bg, var(--solid-amber));
|
|
--bubble-private-text: var(--chatwoot-bubble-private-text, var(--amber-12));
|
|
--bubble-bot-bg: var(--chatwoot-bubble-bot-bg, var(--solid-iris));
|
|
--bubble-bot-text: var(--chatwoot-bubble-bot-text, var(--slate-12));
|
|
|
|
/* Meta text colors (per variant) */
|
|
--bubble-agent-meta: var(--chatwoot-bubble-agent-meta, var(--slate-11));
|
|
--bubble-user-meta: var(--chatwoot-bubble-user-meta, var(--slate-11));
|
|
--bubble-private-meta: var(--chatwoot-bubble-private-meta, var(--amber-12));
|
|
--bubble-bot-meta: var(--chatwoot-bubble-bot-meta, var(--slate-11));
|
|
|
|
/* Message status icon colors (per variant) */
|
|
--bubble-agent-status: var(--chatwoot-bubble-agent-status, var(--slate-10));
|
|
--bubble-agent-status-read: var(--chatwoot-bubble-agent-status-read, 126 182 255);
|
|
--bubble-user-status: var(--chatwoot-bubble-user-status, var(--slate-10));
|
|
--bubble-user-status-read: var(--chatwoot-bubble-user-status-read, 126 182 255);
|
|
--bubble-private-status: var(--chatwoot-bubble-private-status, var(--amber-11));
|
|
--bubble-private-status-read: var(--chatwoot-bubble-private-status-read, 126 182 255);
|
|
--bubble-bot-status: var(--chatwoot-bubble-bot-status, var(--slate-10));
|
|
--bubble-bot-status-read: var(--chatwoot-bubble-bot-status-read, 126 182 255);
|
|
|
|
/* Spacing - 1 = default */
|
|
--bubble-spacing-ratio: var(--chatwoot-bubble-spacing-ratio, 1);
|
|
}
|