<h1>Media Chrome - Spotify Theme Example</h1> <style> .media-theme-spotify { display: inline-block; min-width: 250px; max-width: 640px; color: #fff; font-family: sans-serif; --media-icon-color: #fff; --media-button-icon-height: 28px; --media-range-track-height: 4px; --media-range-track-background: rgba(255, 255, 255, 0.3); --media-range-thumb-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px 0px; --media-preview-time-background: rgba(20,20,30, 1); --media-preview-time-margin: 0 0 -9px; } .media-theme-spotify .custom-chrome { display: flex; flex-flow: row nowrap; } .media-theme-spotify :not(media-play-button) { --media-control-background: none; --media-control-hover-background: none; } .media-theme-spotify media-time-range { --media-box-padding-left: 7px; --media-box-padding-right: 7px; } .media-theme-spotify media-time-range:not(:hover) { --media-range-thumb-opacity: 0; } .media-theme-spotify media-text-display { font-size: 14px; line-height: 19px; padding: 0 8px; } .media-theme-spotify media-time-display, .media-theme-spotify media-preview-time-display { font-size: 10px; } .media-theme-spotify .media-poster { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background-image: url('https://i.scdn.co/image/ab67616d0000b2735618ee6467c0becf0dd23d68'); background-position: center center; background-repeat: no-repeat; background-size: contain; } .media-theme-spotify media-play-button { border: 1px solid #ffffff; border-radius: 50%; padding: 6px; transition: all 0.1s; } .media-theme-spotify .media-poster:hover media-play-button { transform: scale(1.1); } .media-theme-spotify .content-area { flex-grow: 1; display: flex; flex-flow: column nowrap; align-items: flex-start; padding-top: 8px; background-color: rgb(232, 24, 48); background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8) ); } .media-theme-spotify .content-area media-control-bar { align-self: stretch; } .media-theme-spotify .content-area media-control-bar > * { height: 36px; } </style> <media-controller class="media-theme-spotify" audio=""> <audio slot="media" src="https://stream.mux.com/O4h5z00885HEucNNa1rV02wZapcGp01FXXoJd35AHmGX7g/audio.m4a"></audio> <span class="custom-chrome"> <span class="media-poster"> <media-play-button></media-play-button> </span> <span class="content-area"> <media-text-display><b>Emotion (Deluxe)</b></media-text-display> <media-text-display>Carly Rae Jepsen</media-text-display> <media-control-bar> <media-time-range> <media-preview-time-display slot="preview"></media-preview-time-display> </media-time-range> <media-time-display remaining=""></media-time-display> </media-control-bar> </span> </span> </media-controller>