1 line
9.2 KiB
CSS
1 line
9.2 KiB
CSS
|
.waveform-player{--wfp-accent:#71717a;--wfp-button-color:hsla(0,0%,100%,.9);--wfp-text-color:#fff;--wfp-text-secondary-color:hsla(0,0%,100%,.6);--wfp-btn-artwork-color:hsla(0,0%,100%,.9);--wfp-btn-artwork-scrim:rgba(0,0,0,.5);color:inherit;font-family:inherit;line-height:var(--waveform-line-height,1.4)}.waveform-player.waveform-theme-light{--wfp-button-color:rgba(0,0,0,.8);--wfp-text-color:#333;--wfp-text-secondary-color:rgba(0,0,0,.6)}.waveform-player *{box-sizing:border-box}.waveform-body{display:flex;flex-direction:column;gap:var(--waveform-body-gap,8px)}.waveform-track{gap:var(--waveform-track-gap,12px);position:relative}.waveform-btn,.waveform-track{align-items:center;display:flex}.waveform-btn{background:transparent;border:2px solid;border-radius:var(--wfp-btn-radius,50%);color:var(--wfp-button-color,inherit);cursor:pointer;flex-shrink:0;height:var(--wfp-btn-size,36px);justify-content:center;min-width:var(--wfp-btn-size,36px);opacity:.9;padding:0;transition:all .2s ease;width:var(--wfp-btn-size,36px)}.waveform-btn:hover:not(:disabled){opacity:1;transform:scale(1.05)}.waveform-btn-minimal{border:none;border-radius:0;height:calc(var(--wfp-btn-size, 36px)*1.1);min-width:calc(var(--wfp-btn-size, 36px)*1.1);opacity:.7;width:calc(var(--wfp-btn-size, 36px)*1.1)}.waveform-btn-minimal:hover:not(:disabled){opacity:1;transform:none}.waveform-btn.waveform-btn-minimal svg{height:calc(var(--wfp-btn-size, 36px)*.94);width:calc(var(--wfp-btn-size, 36px)*.94)}.waveform-btn:disabled{cursor:not-allowed;opacity:.3}.waveform-btn>*{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.waveform-btn svg{fill:currentColor;display:block;height:calc(var(--wfp-btn-size, 36px)*.45);width:calc(var(--wfp-btn-size, 36px)*.45)}.waveform-btn-has-artwork{--wfp-btn-size:64px;--wfp-btn-radius:8px;border:none;color:var(--wfp-btn-artwork-color);overflow:hidden;position:relative}.waveform-btn>.waveform-btn-artwork{display:block;height:100%;inset:0;-o-object-fit:cover;object-fit:cover;pointer-events:none;position:absolute;width:100%;z-index:0}.waveform-btn-has-artwork:after{background:var(--wfp-btn-artwork-scrim);content:"";inset:0;pointer-events:none;position:absolute;z-index:1}.waveform-btn-has-artwork>:not(.waveform-btn-artwork){position:relative;z-index:2}.waveform-icon-play svg{margin-left:1px}.waveform-container{cursor:pointer;flex:1;min-height:60px;min-width:0;position:relative;width:100%}.waveform-container:focus-visible{outline:2px solid currentColor}.waveform-container canvas{display:block;height:100%;max-width:100%;position:relative;transition:opacity .3s ease;width:100%;z-index:1}.waveform-info{align-items:center;display:flex;font-size:13px;gap:8px;min-height:20px}.waveform-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.waveform-title{color:var(--wfp-text-color);font-weight:500}.waveform-artist,.waveform-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.waveform-artist{color:var(--wfp-text-secondary-color);font-size:11px}.waveform-bpm,.waveform-time{color:var(--wfp-text-secondary-color);flex-shrink:0;font-size:11px;white-space:nowrap}.waveform-bpm{align-items:center;display:inline-flex;gap:4px}.waveform-loading{background:rgba(0,0,0,.102)}.waveform-error,.waveform-loading{inset:0;position:absolute;z-index:10}.waveform-error{align-items:center;background:rgba(0,0,0,.2);display:flex;justify-content:center}.waveform-error-text{font-size:12px;opacity:.7;padding:0 20px;text-align:center}.waveform-markers{inset:0;pointer-events:none;position:absolute;z-index:5}.waveform-marker{background:hsla(0,0%,100%,.502);border:none;cursor:pointer;height:100%;padding:0;pointer-events:all;position:absolute;top:0;transition:all .2s;width:2px}.waveform-marker:hover{width:4px;z-index:20}.waveform-marker.active{background:currentColor;width:4px;z-index:10}.waveform-marker-tooltip{background:rgba(0,0,0,.902);border-radius:4px;bottom:calc(100% + 4px);color:#fff;font-size:11px;left:50%;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;transform:translate(-50%);transition:opacity .2s;white-space:
|