MMM-MusicAssistant.css

/* MMM-MusicAssistant.css */

/* Pull a color emoji font from Google Fonts so emoji in titles render without
   the user installing any OS font. Falls back to the OS emoji font (and finally
   a tofu box) if the mirror has no internet at load time. @import must stay at
   the top of the file, before any rules. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji");

.mma {
  --mma-width: 340px;
  --mma-art: 84px;
  --mma-accent: #ffffff;
  position: relative;
  width: var(--mma-width);
  border-radius: 14px;
  animation: mma-fade 0.6s ease;
  /* Keep MagicMirror's Roboto for text, but fall through to an emoji font for
     glyphs Roboto lacks (e.g. an emoji in a song title) instead of drawing a
     "missing glyph" box. The browser picks the right font per-glyph. */
  font-family: "Roboto", "Roboto Condensed", "Noto Color Emoji",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.mma-hidden {
  display: none;
}

@keyframes mma-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- blurred album-art background layout ---- */

.mma-background {
  padding: 16px;
}

.mma-bg {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(16px) brightness(0.45) saturate(1.2);
  /* translateZ(0) forces the blurred art onto its own GPU layer so the blur is
     rasterized once and is NOT re-painted when the foreground card/progress bar
     updates. The background art is loaded at a small size (it's blurred anyway),
     so this layer's texture stays cheap. (Avoid will-change here: holding it
     permanently keeps an oversized backing store and can cost more than it saves.) */
  transform: scale(1.1) translateZ(0);
  z-index: 0;
  /* Feather the blurred art to transparent so it dissolves into the black mirror
     screen. A single radial gradient softens all four sides and the corners in one
     pass -- cheaper than intersecting two linear masks (no extra composite step).
     The parent must NOT clip (no overflow:hidden) or the feather is cut away. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* backgroundBlur: false -> no .mma-bg layer; give the card a flat dark panel so
   the text stays readable without the GPU-heavy blurred-art layer. */
.mma-background.mma-flat {
  background: rgba(18, 18, 18, 0.55);
}

.mma-background .mma-card,
.mma-background .mma-nextup {
  position: relative;
  z-index: 1;
}

/* ---- now-playing card ---- */

.mma-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mma-beside {
  padding: 6px 0;
}

.mma-art {
  width: var(--mma-art);
  height: var(--mma-art);
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  flex: 0 0 auto;
}

.mma-info {
  flex: 1 1 auto;
  min-width: 0;
}

.mma-title,
.mma-artist,
.mma-album {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mma-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.mma-artist {
  font-size: 14px;
  opacity: 0.92;
  margin-top: 1px;
}

.mma-album {
  font-size: 12px;
  margin-top: 1px;
}

/* ---- progress bar ---- */

.mma-progress {
  margin-top: 9px;
}

.mma-bar {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  overflow: visible;
}

.mma-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background: var(--mma-accent);
  /* Scale the fill with --mma-pct (0..1, inherited from .mma-bar). We DO smooth
     the once-a-second step, but only via `transform` -- a transform transition
     runs on the compositor thread (the element gets its own layer), so the glide
     is GPU compositing of cached textures, NOT a per-frame main-thread repaint
     over the heavy blur(26px) + mask background. That keeps it smooth and cheap.
     Duration --mma-anim is set from updateProgressInterval so it tracks, not
     overshoots, the tick rate. */
  transform-origin: left center;
  transform: scaleX(var(--mma-pct, 0));
  transition: transform var(--mma-anim, 0.9s) linear;
}

.mma-bar-knob {
  /* Sibling of the fill (not a child), so it is never distorted by the fill's
     scaleX. Position is driven by --mma-knob-x (px along the bar, computed from
     the measured bar width) via transform/translate -- same compositor-only path
     as the fill, so it glides smoothly without a main-thread `left` animation. */
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -4.5px; /* center the 9px dot on its position */
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mma-accent);
  transform: translate(var(--mma-knob-x, 0px), -50%);
  transition: transform var(--mma-anim, 0.9s) linear;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.mma-times {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* ---- next up ---- */

.mma-nextup {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mma-nextup-heading {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}

.mma-nextup-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}

.mma-nextup-row:last-child {
  margin-bottom: 0;
}

.mma-nextup-art {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
  flex: 0 0 auto;
}

.mma-nextup-text {
  min-width: 0;
}

.mma-nextup-title,
.mma-nextup-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- idle ---- */

.mma-idle {
  padding: 10px 4px;
}