> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/audio-waveform/styling.md).

# Styling

## Styling

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

{% hint style="warning" %}
**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. 
{% endhint %}

<table><thead><tr><th width="289.00006103515625">Part</th><th width="307.3333740234375">Variable</th><th>Default</th></tr></thead><tbody><tr><td><strong>Button</strong></td><td></td><td></td></tr><tr><td>Play/Pause Icon Color [1]</td><td>cc-audio-wavesurfer-icon</td><td>#333333</td></tr><tr><td>Button Size w x h [1] </td><td>cc-audio-wavesurfer-button-size</td><td>80px</td></tr><tr><td><strong>Unplayed Waveform</strong></td><td></td><td></td></tr><tr><td>Waveform Top Color [2]</td><td>cc-audio-wavesurfer-top</td><td>#656666</td></tr><tr><td>Waveform Separator Line Color [3]</td><td>cc-audio-wavesurfer-separator</td><td>#ffffff</td></tr><tr><td>Waveform Bottom Color [4]</td><td>cc-audio-wavesurfer-bottom</td><td>#B1B1B1</td></tr><tr><td><strong>Played Waveform</strong></td><td></td><td></td></tr><tr><td>Played Waveform Top Color [5]</td><td>cc-audio-wavesurfer-progress-top</td><td>#EE772F</td></tr><tr><td>Played Waveform Mid Color [6]</td><td>cc-audio-wavesurfer-progress-mid</td><td>#EB4926</td></tr><tr><td>Played Waveform Bottom Color [7]</td><td>cc-audio-wavesurfer-progress-bottom</td><td>#F6B094</td></tr></tbody></table>

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F54EN4uRJVnFhgb0rqLOu%2Fimage.png?alt=media&amp;token=b78f8568-8922-41ca-9884-5b054c9abd61" alt=""><figcaption></figcaption></figure>

## Examples&#x20;

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F8QfqxAZ02lyZfNnrGbJ4%2Fimage.png?alt=media&amp;token=513518b0-d526-491d-b0fe-06ed60fff0d2" alt=""><figcaption></figcaption></figure>

## Future&#x20;

Styling;&#x20;

* Separator position&#x20;
* Numbers
  * Font family&#x20;
  * Font style&#x20;
  * Background&#x20;
  * Border + corners&#x20;
* Icon overrides&#x20;

<https://codepen.io/memetican/pen/raOxgRv/1027467ab9b088408226a8f18d1b64b0>

## Technical Notes

* Uses Wavesurfer library for rendering&#x20;
*

## Code Components ( React )&#x20;

<https://wavesurfer.xyz/examples/?react.js>