Styling the Player

Using CSS Variables (Recommended)

For styling the player, we primarily use and recommend CSS variables.

This method allows for seamless and flexible customization, enabling you to adjust the player's appearance to match your site's design easily.

Minimal example

You can achieve most of your styling needs with these variables. See full reference for advanced customization.

:root {
  --etx-primary-color: #5A42FF;
  --etx-section-button-play-padding: 0 0.5rem 0 0;
  --etx-button-play-padding: 0.5rem;
  --etx-button-play-border-radius: 0.25rem;
  --etx-section-duration-padding: 0 0 0 1rem;
  --etx-font-family: Arial, Helvetica, sans-serif;
}

Full Reference

Below, you'll find a comprehensive reference of all available CSS variables.

• --etx-margin

  • Description: Margin around the player.
  • Default: 0

• --etx-padding

  • Description: Padding inside the player.
  • Default: 0

• --etx-background

  • Description: Background color of the player.
  • Default: transparent

• --etx-border-radius

  • Description: Border radius of the player.
  • Default: 0

• --etx-shadow

  • Description: Box shadow for the player.
  • Default: none

• --etx-primary-color

  • Description: Primary color used across the player.
  • Default: #163860

• --etx-tooltip-information-text-color

  • Description: Text color for the information tooltip.
  • Default: gray

• --etx-progress-thumb-color

  • Description: Color of the progress thumb, usually matches the primary color.
  • Default: #163860

• --etx-progress-thumb-size

  • Description: Size of the progress thumb.
  • Default: 0.75rem

• --etx-font-family

  • Description: Font family for the player's text.
  • Default: Arial, Helvetica, sans-serif

• --etx-text-color

  • Description: Default text color.
  • Default: #757575

• --etx-section-button-play-justify

  • Description: Justification for the play button section.
  • Default: flex-start

• --etx-section-button-play-col

  • Description: Column positioning for the play button section.
  • Default: 1 / 1

• --etx-section-button-play-row

  • Description: Row positioning for the play button section.
  • Default: 1 / 3

• --etx-section-button-play-padding

  • Description: Padding for the play button section.
  • Default: 0

• --etx-button-play-padding

  • Description: Padding for the play button itself.
  • Default: 0

• --etx-button-play-border-radius

  • Description: Border radius for the play button.
  • Default: 0

• --etx-button-play-icon-color

  • Description: Color of the play button icon.
  • Default: white

• --etx-button-play-icon-size

  • Description: Size of the play button icon.
  • Default: 1.6rem

• --etx-title-text-align

  • Description: Alignment of the title text.
  • Default: flex-start

• --etx-title-text-color

  • Description: Color of the title text.
  • Default: #163860

• --etx-title-font-size

  • Description: Font size for the title.
  • Default: 0.938rem

• --etx-title-font-family

  • Description: Font family for the title. Can reuse --etx-font-family.
  • Default: Arial, Helvetica, sans-serif

• --etx-title-font-weight

  • Description: Font weight for the title.
  • Default: bold

• --etx-title-letter-spacing

  • Description: Letter spacing for the title. Consider specifying a default value.
  • Default: normal

• --etx-brand-text-align

  • Description: Alignment for the brand text
  • Default: flex-end

• --etx-brand-font-size

  • Description: Font size for the brand text.
  • Default: 0.65em

• --etx-brand-font-family

  • Description: Font family for the brand text. Can reuse --etx-font-family.
  • Default: Arial, Helvetica, sans-serif

• --etx-brand-text-color-hover

  • Description: Hover color for the brand text. Consider using a different color or --etx-primary-color for hover effects.
  • Default: #163860

• --etx-brand-height

  • Description: Height of the brand.
  • Default: .85rem

• --etx-duration-font-size

  • Description: Font size for the duration display.
  • Default: 0.875rem

• --etx-duration-text-align

  • Description: Text alignment for the duration display.
  • Default: left

• --etx-duration-text-color

  • Description: Text color for the duration display. Can reuse --etx-text-color.
  • Default: #757575

• --etx-progress-border-radius

  • Description: Border radius for the progress bar.
  • Default: 1.25rem

• --etx-progress-height

  • Description: Height of the progress bar.
  • Default: 0.4rem

• --etx-progress-background-color

  • Description: Background color of the progress bar.
  • Default: rgba(172, 166, 187, 0.4)

• --etx-progress-border-color

  • Description: Border color of the progress bar.
  • Default: rgba(0, 0, 0, 0.2)

• --etx-progress-color

  • Description: Color of the progress indicator. Usually matches the primary color.
  • Default: #163860