Styling

info

Available after version 3.0.0

We'd love to help making your product look awesome or just grey we don't judge 🤷‍♂️. We also know that it can be a pain to change the colors overriding css classes, so we included a ton of variables to make your life easier.

Grab the snippet below and add it to your css file to get yourself the 50 shades of grey

:root {

  --PF-color-dark: #413B3C;
  --PF-color-green: #36A693;
  --PF-font-family: Arial, Helvetica, sans-serif;
  --PF-font-thick: 700;

  /* Text color, hover states */
  --PF-player-primary-foreground-color: var(--PF-color-dark);
  --PF-player-highlight-color: var(--PF-color-green);

  /* Background color of controls and player in general */
  --PF-player-primary-background-color: #fff;
  --PF-player-primary-background-transparency: 0.7;

  /* Background color used for progress bar */
  --PF-player-secondary-background-color: #8897ae;
  --PF-player-secondary-background-transparency: 0.5;

  /* Border radius of the player */
  --PF-player-border-radius: 25px;

  /* Should the control bar span all the way? */
  --PF-player-control-bar-width: 100%;
  /* Padding around all the buttons */
  --PF-player-control-bar-padding: 0 1em;
  /* Size of a control button */
  --PF-player-control-size: 36px;
  /* Size of button icons */
  --PF-player-control-icon-size: 20px;

  /* Styling the display text */
  --PF-player-control-font-family: var(--PF-font-family);
  --PF-player-control-font-size: 8px;
  --PF-player-control-font-weight: var(--PF-font-thick);

  /* Variables for the progress bar */
  --PF-player-control-progress-height: 0.5em;
  --PF-player-control-handle-size: calc(var(--PF-player-control-progress-height) * 2);

  --PF-player-control-current-time: block;
  --PF-player-control-duration: block;

  /* Styles for the big play button */
  --PF-player-big-play-width: 76px;
  --PF-player-big-play-height: 76px;
  --PF-player-big-play-icon-size: 32px;
  --PF-player-big-play-background: rgba(115, 133, 159, 0.5);
  --PF-player-big-play-border: none;
  --PF-player-big-play-border-radius: 50%;

  /* ... and what happens when it gets in focus */
  --PF-player-big-play-focused-scale: 1.3;
  --PF-player-big-play-focused-background: rgba(115, 133, 159, 0.5);
  --PF-player-big-play-focused-border: none;
  --PF-player-big-play-focused-border-radius: 50%;

  /* Spinner size for loading */
  --PF-player-spinner-size: calc(var(--PF-player-big-play-icon-size) * 2);

  /* Audio player controls */
  /* Styles for the container of the waveform */
  --PF-player-waveform-padding: 2em;
  --PF-player-waveform-border-radius: var(--PF-player-border-radius);
  --PF-player-waveform-background-color: var(--PF-player-primary-background-color);

  /* Bar colors on progress */
  --PF-player-waveform-bar-color: var(--PF-player-highlight-color);
  /* Default bar colors */
  --PF-player-waveform-bar-background: var(--PF-player-primary-foreground-color);
  /* Width and spacing of the waveform bars - needs a refresh before they are redrawn */
  --PF-player-waveform-bar-width: 7;
  --PF-player-waveform-bar-space: 5;
}

Tired of our icons? We got you covered! Just add the following snippet to your css file and you're good to go.

:root {
    --PF-icon-player-circle: url('your-icon-resource-here');
    --PF-icon-player-replay: url('your-icon-resource-here');
    --PF-icon-player-big-play: url('your-icon-resource-here');
    --PF-icon-player-play: url('your-icon-resource-here');
    --PF-icon-player-pause: url('your-icon-resource-here');
    --PF-icon-player-volume-mute: url('your-icon-resource-here');
    --PF-icon-player-volume-low: url('your-icon-resource-here');
    --PF-icon-player-volume-mid: url('your-icon-resource-here');
    --PF-icon-player-volume-high: url('your-icon-resource-here');
    --PF-icon-player-fullscreen-enter: url('your-icon-resource-here');
    --PF-icon-player-fullscreen-exit: url('your-icon-resource-here');
}

tip

Did we miss something? Feel free to reach out to us at hi@pathfindr.dev, if you need more variables!