MMM-Spotify.css

:root {
  --sp-width: 360px;
  --minimalist-height: 75px;
  --minimalist-width: 100%;
  --minimalist-cover-size: var(--minimalist-height);
  --minimalist-button-size: 50px;
}

#SPOTIFY {
  position: relative;
  width: var(--sp-width);
  border-radius:10px;
  box-sizing:border-box;
  color:#EEE;
  font-weight:normal;
  font-size:18px;
  text-align:left;
  line-height:120%;
  text-shadow:black 2px 2px 2px;
}

#SPOTIFY .hidden {
  display:none;
}


#SPOTIFY.inactive {
}

#SPOTIFY_BACKGROUND {
  background-size: cover;
  background-position: center center;
  filter: blur(16px) opacity(90%) grayscale(33%);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

#SPOTIFY_FOREGROUND {
  position:relative;
  filter:none;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:20px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box
}

#SPOTIFY_INFO {
  width: calc(var(--sp-width) - 20px);
}

#SPOTIFY_INFO > * {
  display:flex;
  justify-content: flex-start;
}

#SPOTIFY_INFO .infoicon {
  width: 20px;
  margin-right:10px;
  text-shadow:black 2px 2px 2px;
  align-items:center;
  text-align: center;
  line-height: inherit;
}

#SPOTIFY_INFO .text {
  width: calc(var(--sp-width) - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:inline-block;
}

#SPOTIFY_TITLE {
  color:#FFF;
  font-weight:bold;
}

#SPOTIFY_COVER {
  width: calc(var(--sp-width) - 40px);
  height: calc(var(--sp-width) - 40px);
  margin-bottom:0.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#SPOTIFY_COVER_IMAGE {
  max-width:100%;
  max-height:100%;
  border-radius:10px;
  box-shadow:black 1px 1px 1px 1px;
}

.fade-in {
  animation: fadeInOpacity 1s 1;
  animation-timing-function: linear;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#SPOTIFY.pausing #SPOTIFY_COVER_IMAGE {
  filter:brightness(50%) grayscale(75%);
}

#SPOTIFY.modal #SPOTIFY_COVER_IMAGE {
  filter:brightness(30%) blur(5px);
}

#SPOTIFY_PROGRESS_TIME {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  font-size:14px;
}

#SPOTIFY_PROGRESS_BAR {
  margin-bottom:10px;
  height:10px;
  width: 100%;
  position:relative;
  border: 1px solid #aaaaaa;
}

progress[value]#SPOTIFY_PROGRESS_BAR::-webkit-progress-value {
  background-color: #FFF;
}

progress[value]#SPOTIFY_PROGRESS_BAR::-webkit-progress-bar {
  background-color: #666;
}

#SPOTIFY_CONTROL {
  display:flex;
  flex-direction:row;
  justify-content: space-around;
  font-size:32px;
  color:#FFF;
}

#SPOTIFY_CONTROL > * {
  border-radius:4px;
  background-color:rgba(0,0,0,0.2);
}

#SPOTIFY_CONTROL > *:active {
  background-color:rgba(255,255,255,0.2);
}


#SPOTIFY_CONTROL .iconify {
  justify-self: center;
  align-self: center;
}

#SPOTIFY_MODAL {
  position: absolute;
  width: inherit;
  height: inherit;
}

#SPOTIFY_ACCOUNT_LIST, #SPOTIFY_DEVICE_LIST {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: inherit;
  max-width: max-content;
  background: rgba(0,0,0, 0.8);
  border-radius: 6px;
}

#SPOTIFY_ACCOUNT_LIST > *, #SPOTIFY_DEVICE_LIST > *, #SPOTIFY_MODAL_LIST > * {
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#SPOTIFY_ACCOUNT_LIST > *:hover, #SPOTIFY_ACCOUNT_LIST > *:active, #SPOTIFY_DEVICE_LIST > *:hover, #SPOTIFY_DEVICE_LIST > *:active, #SPOTIFY_MODAL_LIST > *:hover, #SPOTIFY_MODAL_LIST > *:active {
  background-color:rgba(255,255,255,0.2);
  border-radius: 6px;
}

#SPOTIFY_ACCOUNT_LIST .text, #SPOTIFY_DEVICE_LIST .text, #SPOTIFY_MODAL_LIST .text {
  padding-left: 5px;
}

/* for MMM-Modal integration */
#SPOTIFY_MODAL_LIST {
  background: rgba(0,0,0);
  border-radius: 6px;
}

/* style "mini" */
#SPOTIFY.mini {
  width: var(--sp-width);
  font-size: 16px;
}

#SPOTIFY.mini #SPOTIFY_FOREGROUND {
  flex-direction:row;
  padding:0;
}

#SPOTIFY.mini .mdi {
  font-size: 14px;
}

#SPOTIFY.mini .infoicon {
  margin-right: 6px;
}

#SPOTIFY.mini #SPOTIFY_COVER {
  width:calc(var(--sp-width) - 240px);
  height:calc(var(--sp-width) - 240px);
  padding:0;
}

#SPOTIFY.mini #SPOTIFY_COVER_IMAGE {
  height:calc(var(--sp-width) - 240px);
}

#SPOTIFY.mini #SPOTIFY_INFO {
  width: 240px;
  padding-left:10px;
  margin-top:5px;
}

#SPOTIFY.mini #SPOTIFY_PROGRESS_BAR {
  margin:5px;
  width: 95%;
}

#SPOTIFY.mini #SPOTIFY_PROGRESS_TIME {
  display:none;
}

#SPOTIFY.mini.noPlayback {
  width:calc(var(--sp-width) - 240px);
}

#SPOTIFY.inactive #SPOTIFY_MISC > * {
  display: none;
}

#SPOTIFY.inactive #SPOTIFY_MISC > #SPOTIFY_CONTROL {
  display: flex;
}

#SPOTIFY.inactive #SPOTIFY_CONTROL > * {
  display: none;
}

#SPOTIFY.inactive #SPOTIFY_CONTROL > #SPOTIFY_CONTROL_ACCOUNTS {
  display: block;
}

/* style "minimalistBar" */
#SPOTIFY.minimalistBar {
  width: var(--minimalist-width);
  height: calc(var(--minimalist-height) + 1px);
}

#SPOTIFY.minimalistBar.bottomIn {
  animation-duration: 1s;
  animation-name: fadeInBottom;
}

#SPOTIFY.minimalistBar.bottomOut {
  animation-duration: 1s;
  animation-name: fadeOutBottom;
  animation-fill-mode: forwards;
}

#SPOTIFY.minimalistBar.topIn {
  animation-duration: 1s;
  animation-name: fadeInTop;
}

#SPOTIFY.minimalistBar.topOut {
  animation-duration: 1s;
  animation-name: fadeOutTop;
  animation-fill-mode: forwards;
}

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeOutBottom {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 200%, 0);
  }
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeOutTop {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

#SPOTIFY.minimalistBar.noPlayback #SPOTIFY_FOREGROUND,
#SPOTIFY.minimalistBar.noPlayback #SPOTIFY_PROGRESS_BAR,
#SPOTIFY.minimalistBar #SPOTIFY_BACKGROUND {
  display: none;
}

#SPOTIFY.minimalistBar.pausing #SPOTIFY_PROGRESS_BAR, 
#SPOTIFY.minimalistBar.pausing #SPOTIFY_MISC {
  filter:brightness(50%) grayscale(75%);
}

#SPOTIFY.minimalistBar .text {
  width: inherit;
  margin-right: 0.5em;
  white-space: nowrap;
  display:inline-block;
  font-size: 1em;
}

#SPOTIFY.minimalistBar #TEXT_BULLET {
  margin-right: 0.5em;
  white-space: nowrap;
  display:inline-block;
  color: grey;
}

#SPOTIFY.minimalistBar .iconify {
  display: inline-block;
  width: var(--minimalist-button-size);
  height: var(--minimalist-button-size);
  margin-right: 0px;
}

#SPOTIFY.minimalistBar .infoicon {
  margin-right: 8px;
}

#SPOTIFY_VOLUME .mdi {
  font-size: 20px;
}

#SPOTIFY.minimalistBar #SPOTIFY_PROGRESS_BAR {
  position: relative;
  width: var(--minimalist-width);
  height: 1px;
  border: 0px transparent;
  margin-bottom: 4px;
}

#SPOTIFY.minimalistBar #SPOTIFY_FOREGROUND {
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  padding:0;
}

#SPOTIFY.minimalistBar #SPOTIFY_COVER {
  position: relative;
  width:var(--minimalist-cover-size);
  height:var(--minimalist-height);
  padding:0;
  z-index:1;
}

#SPOTIFY.minimalistBar #SPOTIFY_COVER_IMAGE {
  height:var(--minimalist-height);
  border-radius:0px;
}

#SPOTIFY.minimalistBar #SPOTIFY_CONTROL_PLAY {
  display: inline-block;
  margin: auto;
  width: var(--minimalist-button-size);
}

#SPOTIFY.minimalistBar #SPOTIFY_MISC {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  overflow: hidden;
}

#SPOTIFY_MISC.control  {
  width:calc(
    var(--minimalist-width) -
    var(--minimalist-cover-size) -
    var(--minimalist-button-size)
  );
}

#SPOTIFY_MISC.nocontrol {
  width:calc(
    var(--minimalist-width) -
    var(--minimalist-cover-size)
  );
}

#SPOTIFY.minimalistBar #SPOTIFY_INFO {
  display: flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
  width: inherit;
  height: 70%;
}

#SPOTIFY.minimalistBar.Scroll #SPOTIFY_INFO {
  justify-content: flex-start;
  align-items: center;
  width: inherit;
  height: 70%;
}

#SPOTIFY.minimalistBar.noScroll #SPOTIFY_INFO {
  justify-content: center;
  align-items: center;
  width: initial;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 60s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-100%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

#SPOTIFY.minimalistBar.pausing .marquee {
  animation-play-state: paused;
}

#SPOTIFY.minimalistBar #SPOTIFY_TITLE {
  font-weight: bold;
}

#SPOTIFY.minimalistBar #SPOTIFY_ALBUM {
  color: grey;
}

#SPOTIFY.minimalistBar #SPOTIFY_INFO_FOOTER > #SPOTIFY_LOGO {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

#SPOTIFY.minimalistBar #SPOTIFY_INFO_FOOTER {
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  align-content: flex-end;
}

#SPOTIFY.minimalistBar #TEXT_BULLET {
  margin-right: 0.5em;
  white-space: nowrap;
  display:inline-block;
  color: grey;
}