« For Developers: Embedding, JS, APIs

Customizable CSS variables

Micrio 4.2 has a lot of customizable CSS variables, allowing you to apply your own branding with just a few lines of CSS.

This document applies to Micrio 4.2 and up

Micrio 4 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.

All available CSS variables

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-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-button-filter blur(8px) The button background filter 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 8px solid var(--micrio-marker-border-color) The marker border
--micrio-marker-icon none A customizable marker icon
--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-filter blur(8px) The marker popup background filter effect
--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

Dark mode and light mode

By default, Micrio 4.2 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 auto-scheme to the <micr-io> element.

Light mode is the following CSS:

@media (prefers-color-scheme: light) {
	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);
	}
}

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;
	}
}
✉ Can't find what you're looking for? Contact us!