/* music-card.css — Apple Music tiles. * Visual contract matches iOS MusicCardView. Default accent is #e63946; * per-wall override comes in as --music-accent set on by SSR. */ .music-card { position: absolute; border-radius: 8px; overflow: hidden; cursor: pointer; box-sizing: border-box; border: 3px solid var(--music-accent, #e63946); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; background: #181818; user-select: none; -webkit-user-select: none; } .music-card.is-active { transform: scale(1.02); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32); } .music-card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .music-card-gradient { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100% ); pointer-events: none; } .music-card-info { position: absolute; left: 10px; right: 50px; /* leave room for the play badge */ bottom: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } .music-card-title { font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-card-artist { font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.85); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-card-badge { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--music-accent, #e63946); border: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.1s ease, background 0.1s ease; } .music-card-badge:hover { transform: scale(1.08); filter: brightness(1.08); } .music-card-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.15); pointer-events: none; } .music-card-progress-fill { height: 100%; width: 0; background: var(--music-accent, #e63946); transition: width 0.25s linear; } .music-card-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: music-card-spin 0.8s linear infinite; } @keyframes music-card-spin { to { transform: rotate(360deg); } } /* --- Overlay play badge ------------------------------------------- */ /* Same shape + color as .music-card-badge but sized up for the * fullscreen enlarge overlay. Used as `type: "play"` action by * gallery.js when a music tile is enlarged. */ .image-overlay-music-play { width: 56px; height: 56px; border-radius: 50%; background: var(--music-accent, #e63946); border: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: transform 0.1s ease, background 0.1s ease; color: #fff; } .image-overlay-music-play:hover { transform: scale(1.06); filter: brightness(1.08); } .image-overlay-music-play .music-card-spinner { width: 20px; height: 20px; border-width: 2.5px; } /* --- Text-only fallback (no Apple Music artwork) ------------------ */ .music-card-textonly { background: #28292d; } .music-card-info-textonly { position: static; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; box-sizing: border-box; text-shadow: none; } .music-card-title-textonly { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .music-card-artist-textonly { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }