Audio Play Button Size

This css makes the default play button larger, which improves accessibility. The first rule also turns the tracker bar the same color as the ‘accent’ color for your course.

.audio-player__tracker-bar {
  background: var(--color-accent);
  height: 2px;
}

.audio-player__tracker {
  margin-left: 10px;
}

.audio-player__play:not(.audio-player__play--pause)::before {
  border: 1.5rem solid transparent;
  border-left: 2rem solid;
  position: relative;
}

.audio-player__play--pause {
  transform:scale(1.2);
  position:relative;
  left:8px;
}

.audio-player__play--pause::after, 
.audio-player__play--pause::before {
  height: 2rem;
  width: .4rem;
}

.audio-player__play--pause::after {
  position:relative;
  right:5px
}

Disable audio scrubber

.audio-player__tracker {
  pointer-events: none;
}

This limits the user’s ability to change the playhead position, they can only press play and stop.

Getting started with theme components? Download the blank theme component css file.
Watch: installing a theme component.


Posted

in