Styling

Some styling can be performed in the designer by creating specific variables.

STYLING PRO TIP

Variable overrides set at the site level will affect the styling for all instances of the component, site-wide.

These can be overridden for a specific instance by overriding the CSS vars for a wrapper element. Use the CSS Isolation component to simplify that.

Part

Variable

Default

Button

Play/Pause Icon Color [1]

cc-audio-wavesurfer-icon

#333333

Button Size w x h [1]

cc-audio-wavesurfer-button-size

80px

Unplayed Waveform

Waveform Top Color [2]

cc-audio-wavesurfer-top

#656666

Waveform Separator Line Color [3]

cc-audio-wavesurfer-separator

#ffffff

Waveform Bottom Color [4]

cc-audio-wavesurfer-bottom

#B1B1B1

Played Waveform

Played Waveform Top Color [5]

cc-audio-wavesurfer-progress-top

#EE772F

Played Waveform Mid Color [6]

cc-audio-wavesurfer-progress-mid

#EB4926

Played Waveform Bottom Color [7]

cc-audio-wavesurfer-progress-bottom

#F6B094

Examples

Styling;

Last updated 7 months ago