« 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;
}
}