Styling
The booking widget can easily be styled using CSS variables. Put the updated variable values in your own CSS files, or add it as an inline style tag in the head section of your page.
note
Font family, link color and most general styles are not set in the widget. For those elements, the styles defined on the page where the widget is included will be used.
Example code
The following example sets the primary and secondary color in a style tag to be put in the head section of your page.
<style>
#cliento-booking {
--cb-color-primary: #5f56fc;
--cb-color-secondary: #51136b;
}
</style>
Color variables
The variables in the table below can be used to control the colors in the booking widget.
| Variable name | Default value |
|---|---|
| --cb-color-primary | #5f56fc |
| --cb-color-primary-hover | #4b42e8 |
| --cb-color-secondary | #51136b |
| --cb-color-neutral-10 | #0f0e28 |
| --cb-color-neutral-20 | #484765 |
| --cb-color-neutral-40 | #746f88 |
| --cb-color-neutral-50 | #908faf |
| --cb-color-neutral-60 | #c8c7d6 |
| --cb-color-neutral-70 | #ddddea |
| --cb-color-neutral-80 | #f3f2f9 |
| --cb-color-neutral-90 | #f8f8fc |
| --cb-color-neutral-100 | #fff |
| --cb-color-success-10 | #0d7436 |
| --cb-color-success-30 | #4db376 |
| --cb-color-success-40 | #6cdf9f |
| --cb-color-success-50 | #8ae8af |
| --cb-color-success-100 | #f2fcf6 |
| --cb-color-error-20 | #c72e41 |
| --cb-color-error-40 | #ff4d62 |
| --cb-color-error-100 | #fff2f4 |
| --cb-color-warning-40 | #e39600 |
| --cb-color-warning-50 | #ffb500 |
| --cb-color-warning-100 | #fff4d9 |
| --cb-text | var(--cb-color-neutral-20) |
| --cb-text-muted | var(--cb-color-neutral-50) |
| --cb-input-focus | #5f56fc40 |
| --cb-input-focus-border | var(--cb-color-neutral-60) |
| --cb-alt-button-bg | var(--cb-color-success-100) |
| --cb-alt-button-bg-hover | var(--cb-color-success-50) |
| --cb-alt-button-bg-active | var(--cb-color-success-40) |
| --cb-alt-button-border | var(--cb-color-success-40) |
| --cb-alt-button-label | var(--cb-color-success-30) |
| --cb-alt-button-label-emphasised | var(--cb-color-success-10) |
Sizes and spacing
The variables in the table below can be used to control font sizes and spacing in the booking widget.
| Variable name | Default value |
|---|---|
| --cb-font-size-heading-large | 26px |
| --cb-font-size-heading-medium | 22px |
| --cb-font-size-heading-small | 20px |
| --cb-font-size-large | 18px |
| --cb-font-size-medium | 16px |
| --cb-font-size-small | 14px |
| --cb-font-size-tiny | 13px |
| --cb-border-radius-medium | 16px |
| --cb-border-radius-small | 8px |
| --cb-gutters-desktop | 48px |
| --cb-gutters-tablet | 24px |
| --cb-gutters-mobile | 12px |
| --cb-spacing-xlarge | 32px |
| --cb-spacing-large | 24px |
| --cb-spacing-medium | 16px |
| --cb-spacing-small | 8px |
| --cb-icon-xlarge | 32px |
| --cb-icon-large | 28px |
| --cb-icon-medium | 20px |
| --cb-icon-small | 16px |
| --cb-aside-width | 360px |
| --cb-nav-item-size | 22px |