CSS Variables
LiveMarket components utilize CSS variables for styling customization.These variables come in handy when you want to customize your components for better user experience and website integration.
Component-specific variables are defined on their own documentation pages.
Usage
To make sure a variable is used in a component, use its HTML tag as a selector:
lm-carousel, lm-grid {
--text-red: #F00;
}Common Variables
The following are shared variables used by all components wherever applicable:
General
| Variable | Description | Default |
|---|---|---|
--button-border-radius |
Changes the border radius of button in drawer and details drawer | 0.875rem |
--input-border-radius |
Changes the border radius of the product variant selection input | 0.875rem |
--border-focus-color |
Changes the color of the input & select border on focus | #131448 |
--author-font-weight |
Changes author font weight displayed in shorts | 300 |
--video-bottom-overlay-gap |
Changes bottom gap of the overlay | 8px |
--video-title-font-weight |
Changes video title font weight | 600 |
--video-title-line-height |
Changes video title line height | 24px |
--lm-shorts-font-family |
Changes font family in the shorts | "Poppins", sans-serif; |
--short-video-border-radius |
Changes the border radius of video | 1.25rem |
Colors
| Variable | Description | Default |
|---|---|---|
--white |
#fff |
|
--black |
#000 |
|
--gray-100 |
#f6f6f6 |
|
--gray-200 |
#eeeeee |
|
--gray-300 |
#e8ebed |
|
--gray-400 |
#e5e1e1 |
|
--gray-500 |
#cdd2da |
|
--gray-600 |
#b3b3b3 |
|
--gray-700 |
#818ea1 |
|
--gray-800 |
#576882 |
|
--text-dark |
Main dark text color | #031d44 |
--text-dark-secondary |
Secondary dark text color | #131466 |
--text-red |
Red text - prices | #bd1c33 |
Backgrounds
| Variable | Description | Default |
|---|---|---|
--bg-video |
Changes background color of play button and short timer | #6e77f880 |
--bg-red |
Changes background color of dots and add to cart button | #BD1c33 |
--bg-red-hover |
Changes the hover background color of add to cart button | #d03 |
--bg-transparent-200 |
Changes the background color of space behind the modal when is active | rgba(0,0,0,0.2) |
--bg-transparent-500 |
Changes the background color of space behind the drawer when is active | rgba(0,0,0,0.5) |
--bg-transparent-white |
Changes the show more products in shorts button background color | rgba(255,255,255,0.3) |
Shorts
| Variable | Description | Default |
|---|---|---|
--lm-shorts-carousel-play-color |
Changes color of play button | #fff |
--lm-shorts-carousel-play-width |
Changes size od play button | 1.125rem |
--lm-shorts-carousel-play-bg-color |
Changes the background under play button icon | #6e77f880 |
--lm-shorts-carousel-play-bg-radius |
Changes bg radius of background under play icon | 50% |
--lm-shorts-carousel-play-bg-size |
Changes the size of background under play icon | 2.875rem |
--lm-shorts-carousel-play-bg-border |
Changes border of background under play icon | 1px solid #fff |
--shorts-title-opacity |
Changes the opacity of the shorts title | 1 |
--lm-shorts-time-pill-bg |
Background of the video length timer | #6e77f880 |
--lm-shorts-time-pill-border-radius |
Border radius of the video length timer | 1.25rem |
--lm-shorts-time-pill-line-height |
Line height of the video length timer | 1 |
--lm-shorts-author-font-size |
Font size of the author in short | 0.5rem |