@arraypress/waveform-bar 1.3.2 → 1.5.0

package/dist/waveform-bar.css

@@ -13,8 +13,9 @@
     --wb-border: rgba(255, 255, 255, 0.1);
     --wb-text: #ffffff;
     --wb-text-muted: rgba(255, 255, 255, 0.5);
-    --wb-accent: #a855f7;
-    --wb-accent-light: #c084fc;
+    --wb-accent: #fafafa;
+    --wb-accent-light: #e4e4e7;
+    --wb-on-accent: #18181b;
     --wb-hover: rgba(255, 255, 255, 0.08);
     --wb-tag-bg: rgba(255, 255, 255, 0.08);
     --wb-tag-text: rgba(255, 255, 255, 0.7);
@@ -28,6 +29,9 @@
     --wb-border: rgba(0, 0, 0, 0.1);
     --wb-text: #1a1a1a;
     --wb-text-muted: rgba(0, 0, 0, 0.5);
+    --wb-accent: #18181b;
+    --wb-accent-light: #3f3f46;
+    --wb-on-accent: #fafafa;
     --wb-hover: rgba(0, 0, 0, 0.05);
     --wb-tag-bg: rgba(0, 0, 0, 0.06);
     --wb-tag-text: rgba(0, 0, 0, 0.6);
@@ -81,7 +85,8 @@
    ========================================================================== */
 
 .wb-inner {
-    max-width: 1400px;
+    /* Override via the `wide` / `maxWidth` options (sets --wb-max-width on the bar). */
+    max-width: var(--wb-max-width, 1400px);
     margin: 0 auto;
     padding: 0.5rem 1.5rem;
     display: flex;
@@ -147,6 +152,11 @@
     pointer-events: none;
 }
 
+/* Brief "link copied" feedback on the share button. */
+.wb-share.wb-copied {
+    color: #4ade80;
+}
+
 .wb-btn-sm {
     width: 32px;
     height: 32px;
@@ -156,12 +166,12 @@
     width: 40px;
     height: 40px;
     background: var(--wb-accent);
-    color: #fff;
+    color: var(--wb-on-accent);
 }
 
 .wb-play:hover {
     background: var(--wb-accent-light);
-    color: #fff;
+    color: var(--wb-on-accent);
     transform: scale(1.05);
 }
 
@@ -334,7 +344,7 @@
 
 .wb-tag-bpm {
     color: var(--wb-accent);
-    background: rgba(168, 85, 247, 0.12);
+    background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
 }
 
 .wb-tag-key {
@@ -492,7 +502,7 @@
 }
 
 .wb-repeat.wb-repeat-active:hover {
-    background: rgba(168, 85, 247, 0.12);
+    background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
 }
 
 /* ==========================================================================
@@ -501,7 +511,7 @@
 
 .wb-queue-btn.wb-active {
     color: var(--wb-accent);
-    background: rgba(168, 85, 247, 0.12);
+    background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
 }
 
 /* ==========================================================================
@@ -562,7 +572,7 @@
 }
 
 .wb-queue-count {
-    background: rgba(168, 85, 247, 0.15);
+    background: color-mix(in srgb, var(--wb-accent) 15%, transparent);
     color: var(--wb-accent);
     padding: 0.1rem 0.45rem;
     border-radius: 10px;
@@ -631,7 +641,7 @@
 }
 
 .wb-queue-current {
-    background: rgba(168, 85, 247, 0.1);
+    background: color-mix(in srgb, var(--wb-accent) 10%, transparent);
 }
 
 .wb-queue-num {
@@ -793,12 +803,12 @@
 }
 
 .wb-card-highlight.wb-current {
-    border-color: var(--wb-accent, #a855f7);
-    box-shadow: 0 0 0 1px var(--wb-accent, #a855f7);
+    border-color: var(--wb-accent);
+    box-shadow: 0 0 0 1px var(--wb-accent);
 }
 
 .wb-current .wb-accent-current {
-    color: var(--wb-accent, #a855f7);
+    color: var(--wb-accent);
 }
 
 .wb-pulse-playing.wb-playing {
@@ -940,4 +950,58 @@
     .wb-queue-panel {
         bottom: 85px;
     }
+}
+
+/* ==========================================================================
+   Position — dock to the top edge (position: 'top')
+   ========================================================================== */
+
+.waveform-bar.wb-top {
+    top: 0;
+    bottom: auto;
+    border-top: none;
+    border-bottom: 1px solid var(--wb-border);
+    transform: translateY(-100%);
+}
+
+.waveform-bar.wb-top.wb-active {
+    transform: translateY(0);
+}
+
+/* ==========================================================================
+   Collapse-to-pill (collapsible: true)
+   ========================================================================== */
+
+.wb-collapse {
+    flex-shrink: 0;
+}
+
+.waveform-bar.wb-collapsed {
+    left: auto;
+    right: 1rem;
+    bottom: 1rem;
+    border: 1px solid var(--wb-border);
+    border-radius: 999px;
+    overflow: hidden;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+}
+
+.waveform-bar.wb-top.wb-collapsed {
+    top: 1rem;
+    bottom: auto;
+}
+
+.waveform-bar.wb-collapsed .wb-inner {
+    max-width: none;
+    padding: 0.3rem 0.45rem;
+    gap: 0.25rem;
+}
+
+/* Collapsed = a compact transport pill: prev / play-pause / next + expand.
+   Everything else (track info, waveform, right-zone actions, repeat) hides. */
+.waveform-bar.wb-collapsed .wb-centre,
+.waveform-bar.wb-collapsed .wb-right,
+.waveform-bar.wb-collapsed .wb-track,
+.waveform-bar.wb-collapsed .wb-repeat {
+    display: none;
 }