/*
* amplitude-suno.css
* A Suno.com-inspired dark theme for AmplitudeJS
* Drop this in after your existing stylesheet (or replace it).
*
* Covers all standard AmplitudeJS elements:
* - #amplitude-player (bottom fixed bar)
* - #amplitude-left (album art + song info)
* - #amplitude-center (transport controls + progress)
* - #amplitude-right (volume + extras)
* - #amplitude-playlist / .amplitude-song-container (track list rows)
* - All interactive elements: play/pause, prev, next, shuffle, repeat,
* progress bar, volume slider, mute button
* - All metadata elements: song name, artist, album, time, album art
*
* If your IDs/classes differ slightly, search-replace to match.
* Google Fonts import — add this to your if not already present:
*
*/
/* ─── TOKENS ─────────────────────────────────────────────────────────── */
:root {
--amp-bg: #0d0d0f;
--amp-surface: #141416;
--amp-surface2: #1c1c1f;
--amp-surface3: #242428;
--amp-border: rgba(255,255,255,0.07);
--amp-border-hover:rgba(255,255,255,0.15);
--amp-accent: #e8ff47; /* Suno lime-yellow */
--amp-accent-dim: rgba(232,255,71,0.12);
--amp-red: #ff6b6b;
--amp-text: #f0f0f0;
--amp-muted: #6b6b75;
--amp-muted2: #3a3a42;
--amp-font-display:'Syne', sans-serif;
--amp-font-body: 'DM Sans', sans-serif;
--amp-bar-h: 80px;
--amp-radius: 10px;
--amp-transition: 0.15s ease;
}
/* ─── GLOBAL RESETS FOR PLAYER SCOPE ─────────────────────────────────── */
#amplitude-player *,
#amplitude-playlist * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
BOTTOM NOW-PLAYING BAR (#amplitude-player)
═══════════════════════════════════════════════════════════════════════ */
#amplitude-player {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--amp-bar-h);
background: rgba(20, 20, 22, 0.94);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 1px solid var(--amp-border);
display: flex;
align-items: center;
padding: 0 24px;
gap: 20px;
z-index: 9999;
font-family: var(--amp-font-body);
}
/* If you have a full-page player wrapper instead of fixed bar,
swap `position:fixed` for `position:relative` and remove `bottom/left/right`. */
/* ─── LEFT SECTION: album art + song info ─── */
#amplitude-left,
.amplitude-player-left {
display: flex;
align-items: center;
gap: 12px;
width: 260px;
min-width: 200px;
flex-shrink: 0;
}
/* Album art */
#amplitude-player img.amplitude-album-art,
.amplitude-album-art {
width: 46px;
height: 46px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: var(--amp-surface3);
display: block;
}
/* Song info container */
.amplitude-song-info,
#amplitude-song-info {
min-width: 0;
flex: 1;
}
/* Song name */
[data-amplitude-song-info="name"],
.amplitude-song-name,
span[amplitude-song-info="name"] {
font-family: var(--amp-font-display);
font-weight: 600;
font-size: 0.875rem;
color: var(--amp-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
/* Artist */
[data-amplitude-song-info="artist"],
.amplitude-song-artist,
span[amplitude-song-info="artist"] {
font-size: 0.75rem;
color: var(--amp-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
margin-top: 2px;
}
/* Album */
[data-amplitude-song-info="album"],
.amplitude-song-album,
span[amplitude-song-info="album"] {
font-size: 0.7rem;
color: var(--amp-muted2);
display: block;
margin-top: 1px;
}
/* ─── CENTER SECTION: controls + progress ─── */
#amplitude-center,
.amplitude-player-center {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
/* Transport buttons row */
.amplitude-controls,
.amplitude-transport {
display: flex;
align-items: center;
gap: 14px;
}
/* ─── BASE BUTTON STYLE (shared by all control btns) ─── */
#amplitude-player button,
#amplitude-player [data-amplitude-function] {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--amp-transition);
outline: none;
-webkit-tap-highlight-color: transparent;
}
/* ─── SHUFFLE ─── */
#amplitude-shuffle,
.amplitude-shuffle {
color: var(--amp-muted);
font-size: 0.85rem;
padding: 6px;
border-radius: var(--amp-radius);
}
#amplitude-shuffle:hover,
.amplitude-shuffle:hover {
color: var(--amp-text);
}
#amplitude-shuffle.amplitude-shuffle-on,
.amplitude-shuffle-on {
color: var(--amp-accent);
}
/* ─── PREVIOUS ─── */
#amplitude-prev,
.amplitude-prev {
color: var(--amp-muted);
font-size: 1rem;
padding: 6px;
border-radius: var(--amp-radius);
}
#amplitude-prev:hover,
.amplitude-prev:hover {
color: var(--amp-text);
transform: scale(1.08);
}
/* ─── PLAY / PAUSE ─── */
#amplitude-play-pause,
.amplitude-play-pause,
[data-amplitude-function="play_pause"] {
width: 42px;
height: 42px;
border-radius: 50% !important;
background: var(--amp-text) !important;
color: #000 !important;
font-size: 1rem;
transition: all var(--amp-transition);
}
#amplitude-play-pause:hover,
.amplitude-play-pause:hover,
[data-amplitude-function="play_pause"]:hover {
background: var(--amp-accent) !important;
transform: scale(1.06);
}
/* AmplitudeJS toggles a `playing` class when audio is active */
#amplitude-play-pause.amplitude-playing,
.amplitude-play-pause.amplitude-playing,
[data-amplitude-function="play_pause"].amplitude-playing {
background: var(--amp-accent) !important;
color: #000 !important;
}
/* ─── NEXT ─── */
#amplitude-next,
.amplitude-next {
color: var(--amp-muted);
font-size: 1rem;
padding: 6px;
border-radius: var(--amp-radius);
}
#amplitude-next:hover,
.amplitude-next:hover {
color: var(--amp-text);
transform: scale(1.08);
}
/* ─── REPEAT ─── */
#amplitude-repeat,
.amplitude-repeat {
color: var(--amp-muted);
font-size: 0.85rem;
padding: 6px;
border-radius: var(--amp-radius);
}
#amplitude-repeat:hover,
.amplitude-repeat:hover {
color: var(--amp-text);
}
#amplitude-repeat.amplitude-repeat-on,
.amplitude-repeat-on {
color: var(--amp-accent);
}
/* ─── PROGRESS BAR ─── */
.amplitude-progress-container,
#amplitude-progress-container {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 500px;
}
/* Current time */
.amplitude-current-time,
#amplitude-current-time,
span.amplitude-current-minutes,
span.amplitude-current-seconds {
font-size: 0.7rem;
color: var(--amp-muted);
font-family: var(--amp-font-body);
white-space: nowrap;
min-width: 28px;
text-align: right;
}
/* Duration time */
.amplitude-duration,
#amplitude-duration,
span.amplitude-duration-minutes,
span.amplitude-duration-seconds {
font-size: 0.7rem;
color: var(--amp-muted);
font-family: var(--amp-font-body);
white-space: nowrap;
min-width: 28px;
}
/* The range/progress bar AmplitudeJS uses:
class="amplitude-song-played-progress" on an or a