UI styles set the look of the standard UI elements: Button, Slider, Checkbox (including radio buttons) and Text Input. They live in the UI tab of the Style Manager, next to the text styles.
The UI Tab
The tab shows a live example of each element. Pick a style from the dropdown at the top, then click an element to edit its CSS for that style.
The editor works like the text style form. CSS Rules style the element itself, and Advanced options holds groups for states and inner pieces. The preview at the bottom can be interacted with, so hover and press states can be tried out. Save Changes or the back arrow keeps your changes, and Cancel throws them away.
Button, Checkbox and Text Input also have Font and Text Colour fields. They win over a font or color rule in the same style's CSS Rules, such as the Default button's font: inherit.
While typing a rule, a list suggests property names, then the values that property accepts after the colon. Use the arrow keys to choose, Enter or Tab to accept and Esc to close it. Ctrl+Space opens it at any time.
Images
Button, Slider and Checkbox have an Images section with the standard image picker:
| Element | Images |
|---|---|
| Button | Normal, Hover, Pressed |
| Slider | Track, Handle |
| Checkbox | Box, Tick |
They're drawn the same way as the images on a node, and your CSS rules can still adjust them, for example the thumb's width. An image set on the node itself takes priority over the style's.
Groups
A group's selector is added straight after the element's selector, the same as text style groups. The arrow next to + Add Group lists the useful ones for the element:
| Element | Group presets |
|---|---|
| Button | Hover :hover, Pressed :active, Focus :focus-visible, Disabled :disabled |
| Slider | Track ::-webkit-slider-runnable-track, Thumb ::-webkit-slider-thumb, Hover :hover, Disabled :disabled |
| Checkbox | Hover :hover, Box .mm-ui-box, Ticked box .mm-ui-box:checked, Label text .mm-ui-text, Disabled :has(input:disabled) |
| Text Input | Focus :focus, Placeholder ::placeholder, Disabled :disabled |
A selector that starts with a space styles something inside the element, such as the checkbox's box.
Slider Track and Thumb groups are copied for Firefox automatically. Adding either one turns off the browser's own slider look, so the slider is drawn only from your rules. When you style the thumb, give it a width, height and background.
The Default Style
Default applies to every UI element in the project. A new project starts with rules that give the same look Mammut has always used, such as the semi-transparent text input background. Edit them to change every element at once.
Reset to built-in in the style menu puts the original rules back.
Named Styles
Press New style to add a named style, such as primary or danger. One named style can hold rules for any of the four elements. An element with no rules in the named style just uses Default.
Named styles are applied on top of Default, so you only need the rules that are different. The style menu can rename, duplicate or delete a named style. Nodes using a deleted or renamed style go back to Default.
Using a Style on a Node
Button, Slider, Checkbox and Text Input nodes have a Style dropdown at the top of their inspector section. Choose Default or any named style.
The node's own settings are applied on top of the style. For checkboxes and text inputs, Font Size and the checkbox Size can be left empty to use the style's value, which is shown greyed out in the field. Typing a value overrides the style, and the ✕ next to it clears it again.
Order
From lowest to highest, a UI node's look comes from:
- Mammut's built-in layout rules
- The Default UI style
- The node's chosen UI style
- The node's own inspector settings
- The node's custom CSS, groups and states