search

runtime-rundown / podcast-site

Powering the runtime rundown podcast site
runtime-rundown.vercel.app
8 stars 0 forks source link

Audio player styling #36

Closed helloitsjoe closed 4 months ago

helloitsjoe commented 4 months ago

What problem does this solve?

The low-contrast black-on-dark-blue audio player was bugging me.

Details

The audio player isn't very customizable unless we want to go full custom controls at some point. Text/controls are white when the system is in dark mode, and black when in light mode, so I went with white background for prefers-color-scheme: light and dark blue for prefers-color-scheme: dark.

Also, the .episodePlayer class wasn't being used, so I removed some unused styling (but kept the rounded corners)

Screenshots

Here's what it looks like on Chrome:

Prefers light:

image

Prefers dark:

image

Doesn't look terrible on Firefox, although the background is a little bit different from the native player (and there doesn't appear to be a way to style the player background on FF)

image
vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
runtime-rundown ✅ Ready (Inspect) Visit Preview Feb 14, 2024 3:11am