Apple Music-like NSPanel Pro 4" Card

card.yaml

# You can find some pictures here:
# https://www.reddit.com/r/homeassistant/comments/1qzf6x3/i_needed_a_compact_media_player_card_for_my/

type: custom:maxi-media-player
entities:
  - media_player.sonos_arc_ultra
sections:
  - player
topFavorites:
  - ""
artworkAsBackground: true
artworkAsBackgroundBlur: 100
playerControlsAndHeaderBackgroundOpacity: 0
hideVolumeCogwheel: false
dynamicVolumeSlider: false
hideGroupCurrentTrack: false
hideBrowseMediaButton: false
showVolumeUpAndDownButtons: false
showFastForwardAndRewindButtons: false
hidePlayerControlPowerButton: false
hidePlayerControlShuffleButton: false
hidePlayerControlPrevTrackButton: false
hidePlayerControlRepeatButton: false
playerControlsLargeIcons: true
dynamicVolumeSliderMax: 16
card_mod:
  style:
    .: |
      ha-card, .content {
        height: auto !important;
      }
    mxmp-player$: |
      .container {
        min-height: 0 !important;
        grid-template:
          "artwork"
          "header" min-content
          "controls" min-content / 100% !important;
        grid-template-rows: fit-content min-content min-content !important;
      }
      .artwork {
        margin-top: 20px;
        margin-bottom: 5px;
        border-radius: 10px !important;
        width: 190px !important;
        height: 190px !important;
        max-height: 190px !important;
        min-height: 0 !important;
        aspect-ratio: 1;
        justify-self: center;
        box-shadow: 0 5px 10px -8px rgba(0,0,0,0.7), 0 5px 20px 10px rgba(0,0,0,0.3);
      }
      .header, .controls {
        margin: 0 30px !important;
      }
      .controls {
        padding-block: 0 !important;
      }
    mxmp-player$ mxmp-player-header$: |
      .song {
        color: white !important;
        white-space: nowrap;
        font-weight: semibold !important;
      }
    mxmp-player$ mxmp-player-header$ mxmp-progress$: |
      .progress {
        display: grid !important;
        grid-template:
          "track track track" 100%
          "elapsed _ remaining" 40px / 1fr 1fr 1fr;
        grid-template-rows: 8px 18px;
        gap: 2px;
        margin-top: 5px;
      }
      .bar {
        background-color: rgba(255,255,255,0.1) !important;
        border-radius: 10px;
        height: 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
      }
      .progress-bar {
        background-color: rgba(255,255,255,0.7) !important;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        height: 8px !important;
      }
      .progress *:nth-child(1) {
        grid-area: elapsed;
        text-align: left;
        color: rgba(255,255,255,0.6);
      }
      .progress *:nth-child(2) {
        grid-area: track;
      }
      .progress *:nth-child(3) {
        grid-area: remaining;
        text-align: right;
        color: rgba(255,255,255,0.6);
      }
    mxmp-player$ mxmp-player-controls$: |
      .icons {
        margin-top: 0px !important;
        margin-bottom: 11px !important;
      }
    mxmp-player$ mxmp-player-controls$ mxmp-volume$: |
      ha-control-slider {
        height: 8px;
      }
      ha-icon-button {
        --mdc-icon-button-size: 2rem !important;
        --mdc-icon-size: 1.5rem !important;
      }
      .volume { align-items: center; gap: 10px; }
      .volume-level { display: none !important; }
    mxmp-player$ mxmp-player-controls$ mxmp-volume$ ha-control-slider$: >
      .slider-track-bar { border-radius: 0 !important; background:
      rgba(255,255,255,0.7) !important; }

      .slider-track-bar::after { display: none !important; }