CSS Variables
Livemarket iframes has many (and will probably have more in the future!) CSS variables that come with your package.
They are located in default/variables.css.
These variables come in handy when you want to customize your iframe for better user experience and website integration.
Current variables:
| Variable | Description | Default |
|---|---|---|
--lm-primary-color |
changes the primary (main) color, some elements use it as their main color when no other is defined. | #ff013e |
--lm-default-bg |
changes the primary (main) background color, some elements use it as their main color when no other is defined. | #ff013e |
--lm-global-txt-color |
changes global text-color | #031d44 |
--lm-add-to-cart-button-txt-color |
changes ‘Add To Cart’ button text color. | #ffffff |
--lm-add-to-cart-button-bg-color |
changes ‘Add To Cart’ button background color. | #ff013e |
--lm-add-to-cart-button-border-color |
changes ‘Add To Cart’ button border color. | #ff013e |
--lm-add-to-cart-button-opacity |
changes ‘Add To Cart’ button opacity in default state. | 1 |
--lm-add-to-cart-button-disabled-opacity |
changes ‘Add To Cart’ button opacity in disabled state. | 0.75 |
--lm-add-to-cart-button-hover-opacity |
changes ‘Add To Cart’ button opacity when user hovers on it. | 0.75 |
--lm-play-button-txt-color |
changes ‘Play’ button text color. | #ffffff |
--lm-play-button-bg-color |
changes ‘Play’ button background color. | #6E77F8 |
--lm-play-button-border-color |
changes ‘Play’ button border color. | #6E77F8 |
--lm-play-button-hover-opacity |
changes ‘Play’ button opacity when user hovers on it. | 0.75 |
--lm-live-badge-bg |
changes ‘LIVE’ badge color in the right corner of the video. | #ff013e |
--lm-moderator-answer-bg |
changes moderator answer background color. | #6E77F8 |
--lm-moderator-answer-bg-mobile |
changes moderator answer background color on mobile. | #6E77F8 |
--lm-moderator-answer-bg-rgb |
changes moderator answer background color (rgb). | 110, 119, 248 |
--lm-moderator-answer-bg-rgb-mobile |
changes moderator answer background color (rgb) on mobile. | 110, 119, 248 |
--lm-moderator-answer-txt-color |
changes moderator answer text color. | #ffffff |
--lm-moderator-answer-txt-color-mobile |
changes moderator answer text color on mobile. | #ffffff |
--lm-moderator-answer-fw |
changes moderator answer font weight. | 400 |
--lm-moderator-answer-name-txt-color |
changes moderator name text color. | #ff013e |
--lm-moderator-answer-name-fw |
changes moderator name font weight. | 400 |
--lm-moderator-bg |
changes moderator icon background. | transparent |
--lm-moderator-bg-img |
changes moderator icon, only url('base64') format is accepted, with base64 image, you can use these to convert your image to base64: base64-image.de, base64.guru (svg). |
url("base64") |
--lm-moderator-bg-position |
changes moderator icon position. | center center |
--lm-moderator-bg-repetition |
changes moderator icon repeat | no-repeat |
--lm-moderator-bg-percentage |
changes moderator icon size | 50% |
--lm-price-standard-txt-color |
changes standard (not on sale) price color | #576882 |
--lm-price-onsale-txt-color |
changes on sale price color | #ff013e |
--lm-video-progress-bar-color |
changes video progress bar color | #ff013e |
--lm-live-product-border-color |
changes border color for product that is set as LIVE in admin panel |
#6E77F8 |
--lm-live-product-bg |
changes background color for product that is set as LIVE in admin panel |
#6E77F8 |
--lm-live-product-mobile-bg |
changes background color for product that is set as LIVE in admin panel, but on mobile |
#fff |
--lm-live-product-badge-bg |
changes background color of “LIVE” bagde for product that is set as LIVE in admin panel |
|
--lm-live-product-badge-txt-color |
changes text color of “LIVE” badge for product that is set as LIVE in admin panel |
|
--lm-scroll-background |
changes scroll background color | #f0f1f1 |
--lm-scroll-color |
changes scroll color | #ff013e |
--lm-chat-disabled-txt-color |
changes text color of the pill with information that chat is disabled | #784FEE |
--lm-chat-send-button-bg |
changes send message button background | #ff013e |
--lm-chat-user-button-bg |
changes user button background | #ff013e |
--lm-chat-message-removed-txt-color |
changes message removed by moderator text color | #ffffff |
--lm-chat-message-removed-mobile-txt-color |
changes message removed by moderator text color on mobile | #ff013e |
--lm-chat-message-removed-bg |
changes message removed by moderator background | rgba(255, 1, 62, 0.3) |
--lm-chat-message-date-color |
changes color of date displayed next to username on chat | #575757 |
--lm-chat-message-date-color-mobile |
changes color of date displayed next to username on chat, but on mobile devices | #575766 |
--lm-product-details-button-txt-color |
changes product details button text color | #031D44 |
--lm-product-details-button-txt-dec |
changes product details button text decoration | none |
--lm-product-title-txt-color |
changes product title text color | #031D44 |
--lm-product-mobile-bg |
changes background color for product on mobile list of products | “ |
--lm-drawer-product-title-txt-color |
changes text color of product title in the drawer (after clicking on product details) | #031D44 |
--lm-drawer-product-title-opacity |
changes opacity of product title in the drawer (after clicking on product details) | 1 |
--lm-drawer-product-title-txt-dec |
changes text decoration of product title in the drawer (after clicking on product details) | none |
--lm-drawer-product-desc-title-txt-color |
changes text color of product title in the drawer (after clicking on product details), the one before description | #141448 |
--lm-drawer-product-desc-label-txt-color |
changes label “Product Description” text color | #818EA1 |
--lm-drawer-product-desc-txt-color |
changes product description text color | #818EA1 |
--lm-drawer-title-txt-color |
changes drawer title text color | #000000 |
--lm-drawer-title-opacity |
changes drawer title opacity | 1 |
--lm-drawer-title-txt-dec |
changes drawer title text decoration | none |
--lm-popup-wrapper-bg |
changes background of popup wrapper | rgba(18, 179, 133, 0.7) |
--lm-popup-control-bg |
changes background of popup controls | rgba(18, 179, 133, 0.7) |
--lm-username-initials-txt-color |
changes username text color | rgba(110, 119, 248, 0.5) |
--lm-chip-tba-bg |
changes background of TBA that is displayed before the live starts | #031d44 |
--lm-calendar-btn-bg |
changes background of calendar button that is displaying time before live | #ff013e |
--lm-calendar-txt-color |
changes text color of calendar button that is displaying time before live | #ffffff |
--lm-like-button-color |
changes color of like button (heart) when not liked | |
--lm-like-button-fav-color |
changes color of like button (heart) when liked | |
--lm-product-price-font-family |
changes font family of the price in list of products | Poppins, sans-serif |
--lm-product-border-width |
changes width of border of the products in list | 1px |
--lm-product-border-color |
changes color of border of the products in list | #D9D9D9 |