@arraypress/waveform-bar 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/waveform-bar.css +16 -13
  2. package/dist/waveform-bar.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/css/waveform-bar.css +16 -13
package/dist/waveform-bar.css CHANGED
@@ -13,8 +13,9 @@
13
13
  --wb-border: rgba(255, 255, 255, 0.1);
14
14
  --wb-text: #ffffff;
15
15
  --wb-text-muted: rgba(255, 255, 255, 0.5);
16
- --wb-accent: #a855f7;
17
- --wb-accent-light: #c084fc;
16
+ --wb-accent: #fafafa;
17
+ --wb-accent-light: #e4e4e7;
18
+ --wb-on-accent: #18181b;
18
19
  --wb-hover: rgba(255, 255, 255, 0.08);
19
20
  --wb-tag-bg: rgba(255, 255, 255, 0.08);
20
21
  --wb-tag-text: rgba(255, 255, 255, 0.7);
@@ -28,6 +29,9 @@
28
29
  --wb-border: rgba(0, 0, 0, 0.1);
29
30
  --wb-text: #1a1a1a;
30
31
  --wb-text-muted: rgba(0, 0, 0, 0.5);
32
+ --wb-accent: #18181b;
33
+ --wb-accent-light: #3f3f46;
34
+ --wb-on-accent: #fafafa;
31
35
  --wb-hover: rgba(0, 0, 0, 0.05);
32
36
  --wb-tag-bg: rgba(0, 0, 0, 0.06);
33
37
  --wb-tag-text: rgba(0, 0, 0, 0.6);
@@ -162,12 +166,12 @@
162
166
  width: 40px;
163
167
  height: 40px;
164
168
  background: var(--wb-accent);
165
- color: #fff;
169
+ color: var(--wb-on-accent);
166
170
  }
167
171
 
168
172
  .wb-play:hover {
169
173
  background: var(--wb-accent-light);
170
- color: #fff;
174
+ color: var(--wb-on-accent);
171
175
  transform: scale(1.05);
172
176
  }
173
177
 
@@ -187,7 +191,6 @@
187
191
  .wb-artwork {
188
192
  width: 40px;
189
193
  height: 40px;
190
- border-radius: 6px;
191
194
  background: linear-gradient(135deg, var(--wb-accent), var(--wb-accent-light));
192
195
  display: flex;
193
196
  align-items: center;
@@ -340,7 +343,7 @@
340
343
 
341
344
  .wb-tag-bpm {
342
345
  color: var(--wb-accent);
343
- background: rgba(168, 85, 247, 0.12);
346
+ background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
344
347
  }
345
348
 
346
349
  .wb-tag-key {
@@ -498,7 +501,7 @@
498
501
  }
499
502
 
500
503
  .wb-repeat.wb-repeat-active:hover {
501
- background: rgba(168, 85, 247, 0.12);
504
+ background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
502
505
  }
503
506
 
504
507
  /* ==========================================================================
@@ -507,7 +510,7 @@
507
510
 
508
511
  .wb-queue-btn.wb-active {
509
512
  color: var(--wb-accent);
510
- background: rgba(168, 85, 247, 0.12);
513
+ background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
511
514
  }
512
515
 
513
516
  /* ==========================================================================
@@ -568,7 +571,7 @@
568
571
  }
569
572
 
570
573
  .wb-queue-count {
571
- background: rgba(168, 85, 247, 0.15);
574
+ background: color-mix(in srgb, var(--wb-accent) 15%, transparent);
572
575
  color: var(--wb-accent);
573
576
  padding: 0.1rem 0.45rem;
574
577
  border-radius: 10px;
@@ -637,7 +640,7 @@
637
640
  }
638
641
 
639
642
  .wb-queue-current {
640
- background: rgba(168, 85, 247, 0.1);
643
+ background: color-mix(in srgb, var(--wb-accent) 10%, transparent);
641
644
  }
642
645
 
643
646
  .wb-queue-num {
@@ -799,12 +802,12 @@
799
802
  }
800
803
 
801
804
  .wb-card-highlight.wb-current {
802
- border-color: var(--wb-accent, #a855f7);
803
- box-shadow: 0 0 0 1px var(--wb-accent, #a855f7);
805
+ border-color: var(--wb-accent);
806
+ box-shadow: 0 0 0 1px var(--wb-accent);
804
807
  }
805
808
 
806
809
  .wb-current .wb-accent-current {
807
- color: var(--wb-accent, #a855f7);
810
+ color: var(--wb-accent);
808
811
  }
809
812
 
810
813
  .wb-pulse-playing.wb-playing {
package/dist/waveform-bar.min.css CHANGED
@@ -1 +1 @@
1
- .waveform-bar,.wb-queue-panel{--wb-bg: rgba(17, 17, 17, .95);--wb-border: rgba(255, 255, 255, .1);--wb-text: #ffffff;--wb-text-muted: rgba(255, 255, 255, .5);--wb-accent: #a855f7;--wb-accent-light: #c084fc;--wb-hover: rgba(255, 255, 255, .08);--wb-tag-bg: rgba(255, 255, 255, .08);--wb-tag-text: rgba(255, 255, 255, .7);--wb-fav-color: #ef4444;--wb-cart-color: #4ade80}.waveform-bar.wb-light,.wb-queue-panel.wb-light{--wb-bg: rgba(255, 255, 255, .95);--wb-border: rgba(0, 0, 0, .1);--wb-text: #1a1a1a;--wb-text-muted: rgba(0, 0, 0, .5);--wb-hover: rgba(0, 0, 0, .05);--wb-tag-bg: rgba(0, 0, 0, .06);--wb-tag-text: rgba(0, 0, 0, .6)}.waveform-bar.wb-light{box-shadow:0 -1px 8px #00000014}.wb-queue-panel.wb-light{box-shadow:0 -2px 16px #0000001a}.wb-light .wb-volume-popup{box-shadow:0 -2px 12px #0000001a}.waveform-bar{position:fixed;bottom:0;left:0;right:0;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--wb-border);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}.waveform-bar.wb-active{transform:translateY(0);opacity:1}.waveform-bar *{box-sizing:border-box}.wb-inner{max-width:var(--wb-max-width, 1400px);margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;gap:.75rem}.wb-left{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.wb-centre{flex:1;min-width:120px;display:flex;align-items:center;gap:.75rem}.wb-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.wb-controls{display:flex;align-items:center;gap:.125rem;flex-shrink:0}.wb-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--wb-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}.wb-btn:hover{background:var(--wb-hover);color:var(--wb-accent)}.wb-btn.wb-disabled{opacity:.25;pointer-events:none}.wb-share.wb-copied{color:#4ade80}.wb-btn-sm{width:32px;height:32px}.wb-play{width:40px;height:40px;background:var(--wb-accent);color:#fff}.wb-play:hover{background:var(--wb-accent-light);color:#fff;transform:scale(1.05)}.wb-track{display:flex;align-items:center;gap:.625rem;min-width:0;max-width:200px;overflow:hidden}.wb-artwork{width:40px;height:40px;border-radius:6px;background:linear-gradient(135deg,var(--wb-accent),var(--wb-accent-light));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.wb-artwork img{width:100%;height:100%;object-fit:cover}.wb-track-text{min-width:0;overflow:hidden;width:140px}.wb-title,.wb-artist{white-space:nowrap;line-height:1.3;display:block;overflow:hidden}.wb-title{font-size:.8rem;font-weight:600;color:var(--wb-text)}.wb-artist{font-size:.7rem;color:var(--wb-text-muted)}.wb-title.wb-scrolling,.wb-artist.wb-scrolling{overflow:visible}.wb-title.wb-scrolling .wb-scroll-inner,.wb-artist.wb-scrolling .wb-scroll-inner{display:inline-block;padding-right:3rem;animation:wb-marquee var(--wb-scroll-duration, 8s) ease-in-out infinite}@keyframes wb-marquee{0%,10%{transform:translate(0)}45%,55%{transform:translate(var(--wb-scroll-distance, -100px))}90%,to{transform:translate(0)}}.wb-time{font-size:.7rem;color:var(--wb-text-muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;min-width:70px;text-align:left}.wb-waveform-container{flex:1;min-width:0;width:100%}.wb-waveform-container .waveform-player{width:100%;background:transparent!important;border:none!important}.wb-waveform-container .waveform-player-inner{width:100%;padding:0!important}.wb-waveform-container .waveform-body{width:100%;gap:0!important}.wb-waveform-container .waveform-track{width:100%;padding:0!important}.wb-waveform-container .waveform-marker.wb-marker-active{animation:wb-marker-pulse 2s ease-in-out infinite}@keyframes wb-marker-pulse{0%,to{opacity:1}50%{opacity:.3}}.wb-meta{display:none;align-items:center;gap:.375rem;flex-shrink:0}.wb-tag{display:inline-block;padding:.15rem .5rem;background:var(--wb-tag-bg);color:var(--wb-tag-text);border-radius:4px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.wb-tag-bpm{color:var(--wb-accent);background:#a855f71f}.wb-tag-key{color:#4ade80;background:#4ade801f}.wb-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.wb-fav-active{color:var(--wb-fav-color)!important}.wb-fav-active:hover{background:#ef44441a}.wb-action-done{color:var(--wb-cart-color)!important;animation:wb-flash .3s ease}@keyframes wb-flash{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.wb-volume{position:relative;flex-shrink:0}.wb-mute.wb-muted{opacity:.4}.wb-volume-popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%) translateY(8px);background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:10px;padding:1rem .5rem;box-shadow:0 -8px 30px #0006;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-volume-popup.wb-volume-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0)}.wb-volume-slider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:6px;height:100px;background:transparent;outline:none;cursor:pointer}.wb-volume-slider::-webkit-slider-runnable-track{width:6px;background:var(--wb-border);border-radius:3px}.wb-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--wb-accent);border-radius:50%;cursor:pointer;margin-left:-5px;transition:transform .15s}.wb-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.wb-volume-slider::-moz-range-track{width:6px;background:var(--wb-border);border-radius:3px;border:none}.wb-volume-slider::-moz-range-thumb{width:16px;height:16px;background:var(--wb-accent);border:none;border-radius:50%;cursor:pointer}.wb-volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.wb-repeat{opacity:.4;transition:opacity .15s,color .15s}.wb-repeat.wb-repeat-active{opacity:1;color:var(--wb-accent)}.wb-repeat.wb-repeat-active:hover{background:#a855f71f}.wb-queue-btn.wb-active{color:var(--wb-accent);background:#a855f71f}.wb-queue-panel{position:fixed;bottom:68px;width:340px;max-height:400px;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:12px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);display:flex;flex-direction:column;box-shadow:0 -8px 40px #0006;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-queue-panel.wb-queue-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.wb-queue-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--wb-border);flex-shrink:0}.wb-queue-title{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.wb-queue-title svg{width:16px;height:16px}.wb-queue-count{background:#a855f726;color:var(--wb-accent);padding:.1rem .45rem;border-radius:10px;font-size:.7rem;font-weight:600}.wb-queue-clear{background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;font-size:.7rem;padding:.25rem .5rem;border-radius:4px;transition:all .15s;width:auto;height:auto}.wb-queue-clear:hover{color:var(--wb-accent);background:var(--wb-hover)}.wb-queue-body{flex:1;overflow-y:auto;padding:.375rem}.wb-queue-body::-webkit-scrollbar{width:5px}.wb-queue-body::-webkit-scrollbar-track{background:transparent}.wb-queue-body::-webkit-scrollbar-thumb{background:var(--wb-border);border-radius:3px}.wb-queue-label{padding:.4rem .5rem .2rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--wb-text-muted)}.wb-queue-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:6px;transition:background .15s;cursor:pointer}.wb-queue-item:hover{background:var(--wb-hover)}.wb-queue-current{background:#a855f71a}.wb-queue-num{width:18px;text-align:center;font-size:.7rem;color:var(--wb-text-muted);flex-shrink:0;display:flex;align-items:center;justify-content:center}.wb-queue-current .wb-queue-num{color:var(--wb-accent)}.wb-queue-info{flex:1;min-width:0}.wb-queue-item-title{font-size:.75rem;font-weight:500;color:var(--wb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-current .wb-queue-item-title{color:var(--wb-accent)}.wb-queue-played .wb-queue-item-title{color:var(--wb-text-muted)}.wb-queue-item-artist{font-size:.65rem;color:var(--wb-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-remove{opacity:0;transition:opacity .15s;background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;padding:.2rem;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.wb-queue-item:hover .wb-queue-remove{opacity:1}.wb-queue-remove:hover{color:#ef4444;background:#ef44441a}.wb-queue-empty{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem;color:var(--wb-text-muted);text-align:center}.wb-queue-empty svg{opacity:.3;margin-bottom:.5rem}.wb-queue-empty p{font-size:.8rem;margin:0}.wb-icon-swap .wb-show-pause{display:none}.wb-icon-swap .wb-show-play,.wb-icon-swap.wb-playing .wb-show-pause{display:inline}.wb-icon-swap.wb-playing .wb-show-play{display:none}.wb-eq-bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px;vertical-align:middle}.wb-eq-bars span{width:3px;height:4px;background:currentColor;border-radius:1px;opacity:.3}.wb-playing .wb-eq-bars span{opacity:1;animation:wb-eq .8s ease-in-out infinite}.wb-playing .wb-eq-bars span:nth-child(1){animation-delay:0s}.wb-playing .wb-eq-bars span:nth-child(2){animation-delay:.15s}.wb-playing .wb-eq-bars span:nth-child(3){animation-delay:.3s}.wb-playing .wb-eq-bars span:nth-child(4){animation-delay:.45s}@keyframes wb-eq{0%,to{height:4px}50%{height:14px}}.wb-card-highlight{transition:border-color .2s,box-shadow .2s}.wb-card-highlight.wb-current{border-color:var(--wb-accent, #a855f7);box-shadow:0 0 0 1px var(--wb-accent, #a855f7)}.wb-current .wb-accent-current{color:var(--wb-accent, #a855f7)}.wb-pulse-playing.wb-playing{animation:wb-pulse 2s ease-in-out infinite}@keyframes wb-pulse{0%,to{opacity:1}50%{opacity:.7}}.wb-show-if-fav{display:none}.wb-favorited .wb-show-if-fav{display:inline}.wb-favorited .wb-hide-if-fav,.wb-show-if-cart{display:none}.wb-in-cart .wb-show-if-cart{display:inline}.wb-in-cart .wb-hide-if-cart{display:none}@media(max-width:768px){.wb-inner{padding:.5rem 1rem;gap:.5rem;flex-wrap:wrap}.wb-left{width:auto;min-width:auto;flex:1}.wb-centre{order:10;flex-basis:100%;min-width:100%}.wb-right{order:2}.wb-track-text{width:auto;max-width:200px}.wb-meta{display:none!important}.wb-actions,.wb-time{display:none}.wb-queue-panel{left:0;right:0;width:auto;bottom:90px;border-radius:12px 12px 0 0;max-height:50vh}.wb-volume-popup{left:auto;right:0;transform:none}}@media(max-width:480px){.wb-left{gap:.5rem}.wb-track-text{width:auto;max-width:140px}.wb-prev,.wb-next,.wb-repeat,.wb-volume{display:none}.wb-queue-panel{bottom:85px}}.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)}.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 #00000040}.waveform-bar.wb-top.wb-collapsed{top:1rem;bottom:auto}.waveform-bar.wb-collapsed .wb-inner{max-width:none;padding:.3rem .45rem;gap:.25rem}.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}
1
+ .waveform-bar,.wb-queue-panel{--wb-bg: rgba(17, 17, 17, .95);--wb-border: rgba(255, 255, 255, .1);--wb-text: #ffffff;--wb-text-muted: rgba(255, 255, 255, .5);--wb-accent: #fafafa;--wb-accent-light: #e4e4e7;--wb-on-accent: #18181b;--wb-hover: rgba(255, 255, 255, .08);--wb-tag-bg: rgba(255, 255, 255, .08);--wb-tag-text: rgba(255, 255, 255, .7);--wb-fav-color: #ef4444;--wb-cart-color: #4ade80}.waveform-bar.wb-light,.wb-queue-panel.wb-light{--wb-bg: rgba(255, 255, 255, .95);--wb-border: rgba(0, 0, 0, .1);--wb-text: #1a1a1a;--wb-text-muted: rgba(0, 0, 0, .5);--wb-accent: #18181b;--wb-accent-light: #3f3f46;--wb-on-accent: #fafafa;--wb-hover: rgba(0, 0, 0, .05);--wb-tag-bg: rgba(0, 0, 0, .06);--wb-tag-text: rgba(0, 0, 0, .6)}.waveform-bar.wb-light{box-shadow:0 -1px 8px #00000014}.wb-queue-panel.wb-light{box-shadow:0 -2px 16px #0000001a}.wb-light .wb-volume-popup{box-shadow:0 -2px 12px #0000001a}.waveform-bar{position:fixed;bottom:0;left:0;right:0;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--wb-border);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}.waveform-bar.wb-active{transform:translateY(0);opacity:1}.waveform-bar *{box-sizing:border-box}.wb-inner{max-width:var(--wb-max-width, 1400px);margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;gap:.75rem}.wb-left{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.wb-centre{flex:1;min-width:120px;display:flex;align-items:center;gap:.75rem}.wb-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.wb-controls{display:flex;align-items:center;gap:.125rem;flex-shrink:0}.wb-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--wb-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}.wb-btn:hover{background:var(--wb-hover);color:var(--wb-accent)}.wb-btn.wb-disabled{opacity:.25;pointer-events:none}.wb-share.wb-copied{color:#4ade80}.wb-btn-sm{width:32px;height:32px}.wb-play{width:40px;height:40px;background:var(--wb-accent);color:var(--wb-on-accent)}.wb-play:hover{background:var(--wb-accent-light);color:var(--wb-on-accent);transform:scale(1.05)}.wb-track{display:flex;align-items:center;gap:.625rem;min-width:0;max-width:200px;overflow:hidden}.wb-artwork{width:40px;height:40px;background:linear-gradient(135deg,var(--wb-accent),var(--wb-accent-light));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.wb-artwork img{width:100%;height:100%;object-fit:cover}.wb-track-text{min-width:0;overflow:hidden;width:140px}.wb-title,.wb-artist{white-space:nowrap;line-height:1.3;display:block;overflow:hidden}.wb-title{font-size:.8rem;font-weight:600;color:var(--wb-text)}.wb-artist{font-size:.7rem;color:var(--wb-text-muted)}.wb-title.wb-scrolling,.wb-artist.wb-scrolling{overflow:visible}.wb-title.wb-scrolling .wb-scroll-inner,.wb-artist.wb-scrolling .wb-scroll-inner{display:inline-block;padding-right:3rem;animation:wb-marquee var(--wb-scroll-duration, 8s) ease-in-out infinite}@keyframes wb-marquee{0%,10%{transform:translate(0)}45%,55%{transform:translate(var(--wb-scroll-distance, -100px))}90%,to{transform:translate(0)}}.wb-time{font-size:.7rem;color:var(--wb-text-muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;min-width:70px;text-align:left}.wb-waveform-container{flex:1;min-width:0;width:100%}.wb-waveform-container .waveform-player{width:100%;background:transparent!important;border:none!important}.wb-waveform-container .waveform-player-inner{width:100%;padding:0!important}.wb-waveform-container .waveform-body{width:100%;gap:0!important}.wb-waveform-container .waveform-track{width:100%;padding:0!important}.wb-waveform-container .waveform-marker.wb-marker-active{animation:wb-marker-pulse 2s ease-in-out infinite}@keyframes wb-marker-pulse{0%,to{opacity:1}50%{opacity:.3}}.wb-meta{display:none;align-items:center;gap:.375rem;flex-shrink:0}.wb-tag{display:inline-block;padding:.15rem .5rem;background:var(--wb-tag-bg);color:var(--wb-tag-text);border-radius:4px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.wb-tag-bpm{color:var(--wb-accent);background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-tag-key{color:#4ade80;background:#4ade801f}.wb-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.wb-fav-active{color:var(--wb-fav-color)!important}.wb-fav-active:hover{background:#ef44441a}.wb-action-done{color:var(--wb-cart-color)!important;animation:wb-flash .3s ease}@keyframes wb-flash{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.wb-volume{position:relative;flex-shrink:0}.wb-mute.wb-muted{opacity:.4}.wb-volume-popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%) translateY(8px);background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:10px;padding:1rem .5rem;box-shadow:0 -8px 30px #0006;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-volume-popup.wb-volume-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0)}.wb-volume-slider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:6px;height:100px;background:transparent;outline:none;cursor:pointer}.wb-volume-slider::-webkit-slider-runnable-track{width:6px;background:var(--wb-border);border-radius:3px}.wb-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--wb-accent);border-radius:50%;cursor:pointer;margin-left:-5px;transition:transform .15s}.wb-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.wb-volume-slider::-moz-range-track{width:6px;background:var(--wb-border);border-radius:3px;border:none}.wb-volume-slider::-moz-range-thumb{width:16px;height:16px;background:var(--wb-accent);border:none;border-radius:50%;cursor:pointer}.wb-volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.wb-repeat{opacity:.4;transition:opacity .15s,color .15s}.wb-repeat.wb-repeat-active{opacity:1;color:var(--wb-accent)}.wb-repeat.wb-repeat-active:hover{background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-queue-btn.wb-active{color:var(--wb-accent);background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-queue-panel{position:fixed;bottom:68px;width:340px;max-height:400px;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:12px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);display:flex;flex-direction:column;box-shadow:0 -8px 40px #0006;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-queue-panel.wb-queue-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.wb-queue-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--wb-border);flex-shrink:0}.wb-queue-title{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.wb-queue-title svg{width:16px;height:16px}.wb-queue-count{background:color-mix(in srgb,var(--wb-accent) 15%,transparent);color:var(--wb-accent);padding:.1rem .45rem;border-radius:10px;font-size:.7rem;font-weight:600}.wb-queue-clear{background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;font-size:.7rem;padding:.25rem .5rem;border-radius:4px;transition:all .15s;width:auto;height:auto}.wb-queue-clear:hover{color:var(--wb-accent);background:var(--wb-hover)}.wb-queue-body{flex:1;overflow-y:auto;padding:.375rem}.wb-queue-body::-webkit-scrollbar{width:5px}.wb-queue-body::-webkit-scrollbar-track{background:transparent}.wb-queue-body::-webkit-scrollbar-thumb{background:var(--wb-border);border-radius:3px}.wb-queue-label{padding:.4rem .5rem .2rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--wb-text-muted)}.wb-queue-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:6px;transition:background .15s;cursor:pointer}.wb-queue-item:hover{background:var(--wb-hover)}.wb-queue-current{background:color-mix(in srgb,var(--wb-accent) 10%,transparent)}.wb-queue-num{width:18px;text-align:center;font-size:.7rem;color:var(--wb-text-muted);flex-shrink:0;display:flex;align-items:center;justify-content:center}.wb-queue-current .wb-queue-num{color:var(--wb-accent)}.wb-queue-info{flex:1;min-width:0}.wb-queue-item-title{font-size:.75rem;font-weight:500;color:var(--wb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-current .wb-queue-item-title{color:var(--wb-accent)}.wb-queue-played .wb-queue-item-title{color:var(--wb-text-muted)}.wb-queue-item-artist{font-size:.65rem;color:var(--wb-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-remove{opacity:0;transition:opacity .15s;background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;padding:.2rem;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.wb-queue-item:hover .wb-queue-remove{opacity:1}.wb-queue-remove:hover{color:#ef4444;background:#ef44441a}.wb-queue-empty{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem;color:var(--wb-text-muted);text-align:center}.wb-queue-empty svg{opacity:.3;margin-bottom:.5rem}.wb-queue-empty p{font-size:.8rem;margin:0}.wb-icon-swap .wb-show-pause{display:none}.wb-icon-swap .wb-show-play,.wb-icon-swap.wb-playing .wb-show-pause{display:inline}.wb-icon-swap.wb-playing .wb-show-play{display:none}.wb-eq-bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px;vertical-align:middle}.wb-eq-bars span{width:3px;height:4px;background:currentColor;border-radius:1px;opacity:.3}.wb-playing .wb-eq-bars span{opacity:1;animation:wb-eq .8s ease-in-out infinite}.wb-playing .wb-eq-bars span:nth-child(1){animation-delay:0s}.wb-playing .wb-eq-bars span:nth-child(2){animation-delay:.15s}.wb-playing .wb-eq-bars span:nth-child(3){animation-delay:.3s}.wb-playing .wb-eq-bars span:nth-child(4){animation-delay:.45s}@keyframes wb-eq{0%,to{height:4px}50%{height:14px}}.wb-card-highlight{transition:border-color .2s,box-shadow .2s}.wb-card-highlight.wb-current{border-color:var(--wb-accent);box-shadow:0 0 0 1px var(--wb-accent)}.wb-current .wb-accent-current{color:var(--wb-accent)}.wb-pulse-playing.wb-playing{animation:wb-pulse 2s ease-in-out infinite}@keyframes wb-pulse{0%,to{opacity:1}50%{opacity:.7}}.wb-show-if-fav{display:none}.wb-favorited .wb-show-if-fav{display:inline}.wb-favorited .wb-hide-if-fav,.wb-show-if-cart{display:none}.wb-in-cart .wb-show-if-cart{display:inline}.wb-in-cart .wb-hide-if-cart{display:none}@media(max-width:768px){.wb-inner{padding:.5rem 1rem;gap:.5rem;flex-wrap:wrap}.wb-left{width:auto;min-width:auto;flex:1}.wb-centre{order:10;flex-basis:100%;min-width:100%}.wb-right{order:2}.wb-track-text{width:auto;max-width:200px}.wb-meta{display:none!important}.wb-actions,.wb-time{display:none}.wb-queue-panel{left:0;right:0;width:auto;bottom:90px;border-radius:12px 12px 0 0;max-height:50vh}.wb-volume-popup{left:auto;right:0;transform:none}}@media(max-width:480px){.wb-left{gap:.5rem}.wb-track-text{width:auto;max-width:140px}.wb-prev,.wb-next,.wb-repeat,.wb-volume{display:none}.wb-queue-panel{bottom:85px}}.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)}.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 #00000040}.waveform-bar.wb-top.wb-collapsed{top:1rem;bottom:auto}.waveform-bar.wb-collapsed .wb-inner{max-width:none;padding:.3rem .45rem;gap:.25rem}.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}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arraypress/waveform-bar",
3
- "version": "1.4.0",
3
+ "version": "1.5.1",
4
4
  "description": "Persistent bottom audio player bar for WaveformPlayer - queue management, page persistence, and seamless playback.",
5
5
  "main": "dist/waveform-bar.js",
6
6
  "module": "dist/waveform-bar.esm.js",
package/src/css/waveform-bar.css CHANGED
@@ -13,8 +13,9 @@
13
13
  --wb-border: rgba(255, 255, 255, 0.1);
14
14
  --wb-text: #ffffff;
15
15
  --wb-text-muted: rgba(255, 255, 255, 0.5);
16
- --wb-accent: #a855f7;
17
- --wb-accent-light: #c084fc;
16
+ --wb-accent: #fafafa;
17
+ --wb-accent-light: #e4e4e7;
18
+ --wb-on-accent: #18181b;
18
19
  --wb-hover: rgba(255, 255, 255, 0.08);
19
20
  --wb-tag-bg: rgba(255, 255, 255, 0.08);
20
21
  --wb-tag-text: rgba(255, 255, 255, 0.7);
@@ -28,6 +29,9 @@
28
29
  --wb-border: rgba(0, 0, 0, 0.1);
29
30
  --wb-text: #1a1a1a;
30
31
  --wb-text-muted: rgba(0, 0, 0, 0.5);
32
+ --wb-accent: #18181b;
33
+ --wb-accent-light: #3f3f46;
34
+ --wb-on-accent: #fafafa;
31
35
  --wb-hover: rgba(0, 0, 0, 0.05);
32
36
  --wb-tag-bg: rgba(0, 0, 0, 0.06);
33
37
  --wb-tag-text: rgba(0, 0, 0, 0.6);
@@ -162,12 +166,12 @@
162
166
  width: 40px;
163
167
  height: 40px;
164
168
  background: var(--wb-accent);
165
- color: #fff;
169
+ color: var(--wb-on-accent);
166
170
  }
167
171
 
168
172
  .wb-play:hover {
169
173
  background: var(--wb-accent-light);
170
- color: #fff;
174
+ color: var(--wb-on-accent);
171
175
  transform: scale(1.05);
172
176
  }
173
177
 
@@ -187,7 +191,6 @@
187
191
  .wb-artwork {
188
192
  width: 40px;
189
193
  height: 40px;
190
- border-radius: 6px;
191
194
  background: linear-gradient(135deg, var(--wb-accent), var(--wb-accent-light));
192
195
  display: flex;
193
196
  align-items: center;
@@ -340,7 +343,7 @@
340
343
 
341
344
  .wb-tag-bpm {
342
345
  color: var(--wb-accent);
343
- background: rgba(168, 85, 247, 0.12);
346
+ background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
344
347
  }
345
348
 
346
349
  .wb-tag-key {
@@ -498,7 +501,7 @@
498
501
  }
499
502
 
500
503
  .wb-repeat.wb-repeat-active:hover {
501
- background: rgba(168, 85, 247, 0.12);
504
+ background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
502
505
  }
503
506
 
504
507
  /* ==========================================================================
@@ -507,7 +510,7 @@
507
510
 
508
511
  .wb-queue-btn.wb-active {
509
512
  color: var(--wb-accent);
510
- background: rgba(168, 85, 247, 0.12);
513
+ background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
511
514
  }
512
515
 
513
516
  /* ==========================================================================
@@ -568,7 +571,7 @@
568
571
  }
569
572
 
570
573
  .wb-queue-count {
571
- background: rgba(168, 85, 247, 0.15);
574
+ background: color-mix(in srgb, var(--wb-accent) 15%, transparent);
572
575
  color: var(--wb-accent);
573
576
  padding: 0.1rem 0.45rem;
574
577
  border-radius: 10px;
@@ -637,7 +640,7 @@
637
640
  }
638
641
 
639
642
  .wb-queue-current {
640
- background: rgba(168, 85, 247, 0.1);
643
+ background: color-mix(in srgb, var(--wb-accent) 10%, transparent);
641
644
  }
642
645
 
643
646
  .wb-queue-num {
@@ -799,12 +802,12 @@
799
802
  }
800
803
 
801
804
  .wb-card-highlight.wb-current {
802
- border-color: var(--wb-accent, #a855f7);
803
- box-shadow: 0 0 0 1px var(--wb-accent, #a855f7);
805
+ border-color: var(--wb-accent);
806
+ box-shadow: 0 0 0 1px var(--wb-accent);
804
807
  }
805
808
 
806
809
  .wb-current .wb-accent-current {
807
- color: var(--wb-accent, #a855f7);
810
+ color: var(--wb-accent);
808
811
  }
809
812
 
810
813
  .wb-pulse-playing.wb-playing {