CSS Variables

LiveMarket UGV Widget uses CSS variables for easy theming.

These variables come in handy when you want to customize the component for better user experience and website integration.

Example

To customize UGV widget’s theme, simply define the variables in CSS, targeting the lm-ugv-widget element:

lm-ugv-widget {
    --widget_bg: #f4eae3;
}

.custom-widget-wrapper lm-ugv-widget {
    --widget-bg: linear-gradient(180deg, #f5c2ea 0%, #dc4dbc 100%);
    --widget_border: 0.125rem solid #f5c2ea;
    --widget_bubble_border: none;
}

Available variables

Variable Description Default
General theme
—widget_bg Widget’s background.
Accepts valid CSS background shorthand values.		 #D9D9D9
--widget_text-color Widget’s text color. #000
—widget_border Widget’s border.
Accepts valid CSS border shorthand values.		 0.125rem solid #000
--widget_scroll-color Scrollbar thumb’s color. var(—widget_button_bg-color, #000)
--widget_font-family Font family used in widget. 'Inter', Arial, sans-serif
--widget_font-size_header Widget’s title font size. 1.25rem
--widget_font-size_content Widget’s content font size. 0.75rem
Bubble
--widget_bubble_bg Sets the background of the widget’s bubble. Defaults to widget’s background.
Accepts valid CSS background shorthand value.		 var(—widget_bg)
--widget_bubble_border Sets the border of the widget’s bubble. Defaults to widget’s border.
Accepts valid CSS border shorthand values.		 var(—widget_border)
Form
--widget_font-size_form-headings Font size of “headings” in the form, like for field groups. 0.75rem
--widget_input_bg-color Background color of all form fields. #fff
--widget_input_text-color Text color of all form fields. #000
--widget_input_font-size Font size of all form fields. 0.75rem
--widget_input_radius Border radius of all form fields, except checkboxes. 0.125rem
Submit button
--widget_button_font-size Submit button’s font size. 0.875rem
--widget_button_font-weight Submit button’s font weight. 800
—widget_button_bg-color Submit button’s background color. #000
--widget_button_text-color Submit button’s text color. #fff
--widget_button_hover_bg-color Submit button’s background color on :hover action. #333
--widget_button_hover_text-color Submit button’s text color on :hover action. #fff