Edit the "audio-button" class for audio

Wiki Discussion
1

The way audio is displayed on certain pages doesn’t look the best, and this can easily be solved by editing the class in the CSS

An example of what I mean:

image
image809×778 35.8 KB

It’d be better if we could lessen the size of them to just this using css like here:

image

.audio-button {
  display: inline-block;
  vertical-align: -0.1em;
  width: 1em;
  height: 1em;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--background-color-progressive);
  transition: background-color .2s;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://vignette.wikia.nocookie.net/dev/images/d/d6/OggPlayer_play.svg);
}
2

Why would that be wanted? The time and volume controls are useful

3

They’re usually short clips though. That would be an after thought

4

That doesn’t really answer the question of why this would be wanted though. Also consider that this UI element is used on pages like https://deltarune.wiki/w/Hidden_Music_Tracks which contains audio files of significantly varying lengths.

5

I like the idea for short clips, I’m just not entirely sure if we need all these clips.