@rhds/elements/rh-audio-player/rh-audio-player-lightdom.css

Red Hat Design System Elements

*[hidden] {
  display: none !important;
}

rh-audio-player {
  line-height: var(--rh-line-height-body-text, 1.5);
  font-weight: var(--rh-font-weight-body-text-regular, 400);
  font-size: var(--rh-font-size-code-md, 1rem);
  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
  color: var(--rh-audio-player-text-color, var(--rh-color-text-primary));

  &[color-palette^='dark'] > * {
    background-color:
      var(--rh-audio-player-background-color,
        var(--rh-color-surface-darkest, #151515));
  }
}

rh-audio-player:not([expanded]) rh-transcript:not(:defined) {
  display: none;
}

rh-cue[start]:not(:defined):before,
rh-cue[voice]:not(:defined):before {
  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
  font-size: var(--rh-font-size-body-text-md, 1rem);
  font-weight: var(--rh-font-weight-heading-bold, 700);
}

rh-cue[voice]:not(:defined):before {
  content: attr(voice);
}

rh-cue[start]:not(:defined):before {
  content: attr(start);
}

rh-cue[voice][start]:not(:defined):before {
  content: attr(start) ' - ' attr(voice);
}

rh-cue[voice][start]:empty {
  display: block;
  margin-top: var(--rh-space-lg, 16px);
}

rh-audio-player-about,
rh-audio-player-subscribe {
  display: block;
}

rh-audio-player-about,
rh-audio-player-subscribe,
rh-transcript {
  background-color:
    light-dark(var(--rh-audio-player-background-color,
      var(--rh-color-surface-lightest, #ffffff)),
      var(--rh-audio-player-background-color,
      var(--rh-color-surface-darkest, #151515)));
}

rh-audio-player > [slot='series'] {
  letter-spacing: var(--rh-letter-spacing-body-text, 0.0125rem);
  font-size: var(--rh-font-size-body-text-xs, 0.75rem);
  font-weight: var(--rh-font-weight-heading-medium, 500);
  margin: 0 0 var(--rh-space-md, 8px);
  padding: 0;
}

rh-audio-player > [slot='title'],
rh-audio-player [slot='heading'] {
  font-size: var(--rh-font-size-heading-xs, 1.25rem);
  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
  font-weight: var(--rh-font-weight-heading-medium, 500);
  line-height: var(--rh-line-height-heading, 1.3);
  margin: 0 0 var(--rh-space-lg, 16px);
  padding: 0;
}

rh-audio-player [slot='heading'] {
  font-size: var(--rh-font-size-body-text-md, 1rem);
}