Styling a Micrio embed using CSS Client 4.x

WARNING

This page is about the Micrio client version 4. Use the links below to navigate to other versions.

CSS variables

Micrio 4 uses a set of CSS variables for styling its HTML elements, which are the simplest way of adjusting the way Micrio looks.

You can adjust these variables very easily to tweak the default Micrio look and feel:

Variable	Default value	Description
`--micrio-color`	`#000`	The default text color
`--micrio-color-hover`	`#c5ff5b`	The color for hovering clickable elements
`--micrio-border-radius`	`16px`	The border radius for buttons, popups, etc
`--micrio-background`	`rgba(255,255,255,0.66)`	Element background color
`--micrio-background-hover`	`var(--micrio-background)`	For clickable items, the hover background color
`--micrio-border-color`	`#fff4`	The default Micrio border color
`--micrio-border`	`1px solid var(--micrio-border-color)`	The default Micrio border
`--micrio-page-background`	`#fff`	Custom page background color
`--micrio-page-color`	`#fff`	Custom page font color
`--micrio-marker-size`	`16px`	The base marker size
`--micrio-marker-text-color`	`#fff`	The marker label text color
`--micrio-marker-border-radius`	`100%`	The marker border radius (round)
`--micrio-marker-color`	`transparent`	The clickable marker color
`--micrio-marker-color-hover`	`#fb0`	The clickable marker color hover background
`--micrio-marker-icon`	`none`	A customizable marker icon
`--micrio-marker-shadow-color`	`rgba(0,0,0,0.5)`	Marker shadow color
`--micrio-marker-shadow`	`0 0 3px var(--micrio-marker-shadow-color), inset 0 0 3px var(--micrio-marker-shadow-color)`	The marker shadow itself
`--micrio-marker-shadow-hover`	`none`	Marker shadow color on hover state
`--micrio-marker-border`	`4px solid #fff`	The marker border
`--micrio-marker-transition`	`box-shadow 0.5s ease, background-color 0.5s ease, opacity 0.25s ease`	The marker transition properties

There is also a light-weight responsive mode which affects the CSS variables. For screens narrower than 500px, this is the CSS:

css

@media (max-width: 500px) {
	html {
		--micrio-border-margin: 5px;
		--micrio-button-size: 48px;
	}
}

Of course, since <micr-io> is a simple HTML element, you can use your own CSS to overwrite any of Micrio's styling.