How to use it
- Open the builder and go to Theme Styles.
- Open the Audio group.
- Under Player, set Background color, Padding, Border and Title typography. Icon color tints the play, replay, pause, mute and unmute icons.
- Under Progress bar, set Track color, Loaded color, Played color, Handle color, Bar height, Bar radius and Time typography.
- Under Volume, set Volume color and Volume track color.
Handle color applies to the progress handle and to the volume handle.
Where it appears in Bricks
Theme Styles, in a group called Audio with the other element groups. The styles apply to every Audio element on the site.
How it works with Bricks' styles
Bricks adds its own selectors to theme-style CSS before Kiln's filter runs, so Kiln's controls carry full selectors.
Each one starts with .brxe-audio three times, which gives them a specificity of (0,3,0). With Bricks' cascade layer
turned off, Bricks' own .brxe-audio.theme-light … rules would otherwise win, and these styles still win. Styles you
set on a single Audio element in the builder (its own #brxe-… CSS) still win over the theme style.
Icon color overrides the Light and Dark icon tint of every Audio element. The player's icons are white SVG backgrounds that Bricks tints with a brightness filter. When you choose an icon color, Kiln swaps them for the same SVGs used as masks over that color.
Limits
- The icon color rules embed Bricks' icon URLs, which include your site's domain. After a domain change, regenerate the CSS.
- The group appears only while the Audio element is registered and Bricks has no Audio group of its own. If Bricks ships audio theme styles, this module steps aside.
Settings
None. Turn the module on in Bricks > Kiln (it is on by default).
Requirements
Bricks 2.4 or newer.