Styling a Micrio embed using CSS Client 5.x

This page is about the Micrio client version 5. Use the links below to navigate to alternative versions.

• Version 4.x

CSS variables

Micrio 5 uses a set of CSS variables for styling its HTML elements. This means that 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-filter	blur(8px)	The modal / button background filter
--micrio-icon-size	18px	The default button icon size
--micrio-text-align	left	The text alignment-- defaults to right on LTR languages
--micrio-line-height	1.5em	Popup article line height
--micrio-border-margin	16px	The margin elements will have from the browser border
--micrio-button-size	64px	The buttons size
--micrio-button-shadow	0 4px 8px rgba(0,0,0,.33)	The button shadow effect
--micrio-marker-size	16px	The base marker size
--micrio-marker-text-color	#fff	The marker label text color
--micrio-marker-text-shadow	0px 4px 8px rgba(0,0,0,0.33)	The marker label text shadow
--micrio-marker-color	#fff	The clickable marker color
--micrio-marker-border-radius	100%	The marker border radius (round)
--micrio-marker-border-color	rgba(255,255,255,0.2)	The marker border color
--micrio-marker-border-size	8px	The marker border size
--micrio-marker-icon	none	A customizable CSS marker icon url() property
--micrio-marker-transition	background-color 0.5s ease, opacity 0.25s ease	The marker transition properties
--micrio-popup-background	var(--micrio-background)	The marker popup background
--micrio-popup-shadow	0 8px 16px rgba(0,0,0,.33)	The marker popup box shadow
--micrio-popup-padding	16px	The marker popup inner padding
--micrio-progress-bar-background	rgba(255,255,255,0.25	Media player time track background
--micrio-progress-bar-height	4px	Media player time track height
--micrio-waypoint-size	120px	Virtual tour waypoint icon size

Mobile responsiveness

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

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

Dark mode and light mode

By default, Micrio 5.0 and up support light and dark modes. It defaults to dark mode.

If you want to use the browser's color scheme auto detection, add the class micrio-auto-scheme to the <micr-io> element, or to force light mode, add the micrio-light-mode class.

Light mode is the following CSS:

micr-io {
	--micrio-color: #000;
	--micrio-background: rgba(255,255,255,0.66);
	--micrio-popup-background: var(--micrio-background);
	--micrio-background-hover: var(--micrio-background);
	--micrio-progress-bar-background: rgba(0,0,0,.25);
}

Custom CSS overwrites

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

All of Micrio's HTML elements have a micrio- classname prefix, so it's easy to target specific elements.