[Summary view] [Print] [Text view]

   1  .waveform-player {
   2    font-family: inherit;
   3    color: inherit;
   4    line-height: var(--waveform-line-height, 1.4);
   5    --wfp-accent: #71717a;
   6    --wfp-button-color: rgba(255, 255, 255, .9);
   7    --wfp-text-color: #ffffff;
   8    --wfp-text-secondary-color: rgba(255, 255, 255, .6);
   9    --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
  10    --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
  11  }
  12  
  13  .waveform-player.waveform-theme-light {
  14    --wfp-button-color: rgba(0, 0, 0, .8);
  15    --wfp-text-color: #333333;
  16    --wfp-text-secondary-color: rgba(0, 0, 0, .6);
  17  }
  18  
  19  .waveform-player * {
  20    box-sizing: border-box;
  21  }
  22  
  23  .waveform-body {
  24    display: flex;
  25    flex-direction: column;
  26    gap: var(--waveform-body-gap, 8px);
  27  }
  28  
  29  .waveform-track {
  30    display: flex;
  31    align-items: center;
  32    gap: var(--waveform-track-gap, 12px);
  33    position: relative;
  34  }
  35  
  36  .waveform-btn {
  37    width: var(--wfp-btn-size, 36px);
  38    height: var(--wfp-btn-size, 36px);
  39    min-width: var(--wfp-btn-size, 36px);
  40    border-radius: var(--wfp-btn-radius, 50%);
  41    border: 2px solid currentColor;
  42    background: transparent;
  43    color: var(--wfp-button-color, inherit);
  44    cursor: pointer;
  45    display: flex;
  46    align-items: center;
  47    justify-content: center;
  48    transition: all 0.2s ease;
  49    padding: 0;
  50    opacity: 0.9;
  51    flex-shrink: 0;
  52  }
  53  
  54  .waveform-btn:hover:not(:disabled) {
  55    opacity: 1;
  56    transform: scale(1.05);
  57  }
  58  
  59  .waveform-btn-minimal {
  60    width: calc(var(--wfp-btn-size, 36px) * 1.1);
  61    height: calc(var(--wfp-btn-size, 36px) * 1.1);
  62    min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
  63    border: none;
  64    border-radius: 0;
  65    opacity: 0.7;
  66  }
  67  
  68  .waveform-btn-minimal:hover:not(:disabled) {
  69    opacity: 1;
  70    transform: none;
  71  }
  72  
  73  .waveform-btn.waveform-btn-minimal svg {
  74    width: calc(var(--wfp-btn-size, 36px) * 0.94);
  75    height: calc(var(--wfp-btn-size, 36px) * 0.94);
  76  }
  77  
  78  .waveform-btn:disabled {
  79    cursor: not-allowed;
  80    opacity: 0.3;
  81  }
  82  
  83  .waveform-btn > * {
  84    display: flex;
  85    align-items: center;
  86    justify-content: center;
  87    width: 100%;
  88    height: 100%;
  89  }
  90  
  91  .waveform-btn svg {
  92    width: calc(var(--wfp-btn-size, 36px) * 0.45);
  93    height: calc(var(--wfp-btn-size, 36px) * 0.45);
  94    fill: currentColor;
  95    display: block;
  96  }
  97  
  98  .waveform-btn-has-artwork {
  99    --wfp-btn-size: 64px;
 100    --wfp-btn-radius: 8px;
 101    position: relative;
 102    overflow: hidden;
 103    border: none;
 104    color: var(--wfp-btn-artwork-color);
 105  }
 106  
 107  .waveform-btn > .waveform-btn-artwork {
 108    display: block;
 109    position: absolute;
 110    inset: 0;
 111    width: 100%;
 112    height: 100%;
 113    -o-object-fit: cover;
 114       object-fit: cover;
 115    pointer-events: none;
 116    z-index: 0;
 117  }
 118  
 119  .waveform-btn-has-artwork:after {
 120    content: "";
 121    position: absolute;
 122    inset: 0;
 123    background: var(--wfp-btn-artwork-scrim);
 124    pointer-events: none;
 125    z-index: 1;
 126  }
 127  
 128  .waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
 129    position: relative;
 130    z-index: 2;
 131  }
 132  
 133  .waveform-icon-play svg {
 134    margin-right: 1px;
 135  }
 136  
 137  .waveform-container {
 138    flex: 1;
 139    position: relative;
 140    min-height: 60px;
 141    cursor: pointer;
 142    min-width: 0;
 143    width: 100%;
 144  }
 145  
 146  .waveform-container:focus-visible {
 147    outline: 2px solid currentColor;
 148  }
 149  
 150  .waveform-container canvas {
 151    display: block;
 152    width: 100%;
 153    height: 100%;
 154    max-width: 100%;
 155    transition: opacity 0.3s ease;
 156    position: relative;
 157    z-index: 1;
 158  }
 159  
 160  .waveform-info {
 161    display: flex;
 162    align-items: center;
 163    gap: 8px;
 164    font-size: 13px;
 165    min-height: 20px;
 166  }
 167  
 168  .waveform-text {
 169    flex: 1;
 170    display: flex;
 171    flex-direction: column;
 172    gap: 2px;
 173    min-width: 0;
 174  }
 175  
 176  .waveform-title {
 177    color: var(--wfp-text-color);
 178    white-space: nowrap;
 179    overflow: hidden;
 180    text-overflow: ellipsis;
 181    font-weight: 500;
 182  }
 183  
 184  .waveform-artist {
 185    color: var(--wfp-text-secondary-color);
 186    font-size: 11px;
 187    white-space: nowrap;
 188    overflow: hidden;
 189    text-overflow: ellipsis;
 190  }
 191  
 192  .waveform-time {
 193    color: var(--wfp-text-secondary-color);
 194    font-size: 11px;
 195    white-space: nowrap;
 196    flex-shrink: 0;
 197  }
 198  
 199  .waveform-bpm {
 200    color: var(--wfp-text-secondary-color);
 201    font-size: 11px;
 202    white-space: nowrap;
 203    flex-shrink: 0;
 204    display: inline-flex;
 205    align-items: center;
 206    gap: 4px;
 207  }
 208  
 209  .waveform-loading {
 210    position: absolute;
 211    inset: 0;
 212    background: rgba(0, 0, 0, 0.1019607843);
 213    z-index: 10;
 214  }
 215  
 216  .waveform-error {
 217    position: absolute;
 218    inset: 0;
 219    display: flex;
 220    align-items: center;
 221    justify-content: center;
 222    background: rgba(0, 0, 0, 0.2);
 223    z-index: 10;
 224  }
 225  
 226  .waveform-error-text {
 227    font-size: 12px;
 228    opacity: 0.7;
 229    text-align: center;
 230    padding: 0 20px;
 231  }
 232  
 233  .waveform-markers {
 234    position: absolute;
 235    inset: 0;
 236    pointer-events: none;
 237    z-index: 5;
 238  }
 239  
 240  .waveform-marker {
 241    position: absolute;
 242    top: 0;
 243    width: 2px;
 244    height: 100%;
 245    background: rgba(255, 255, 255, 0.5019607843);
 246    border: none;
 247    padding: 0;
 248    cursor: pointer;
 249    pointer-events: all;
 250    transition: all 0.2s;
 251  }
 252  
 253  .waveform-marker:hover {
 254    width: 4px;
 255    z-index: 20;
 256  }
 257  
 258  .waveform-marker.active {
 259    width: 4px;
 260    background: currentColor;
 261    z-index: 10;
 262  }
 263  
 264  .waveform-marker-tooltip {
 265    position: absolute;
 266    bottom: calc(100% + 4px);
 267    right: 50%;
 268    transform: translate(50%);
 269    background: rgba(0, 0, 0, 0.9019607843);
 270    color: #fff;
 271    padding: 4px 8px;
 272    border-radius: 4px;
 273    font-size: 11px;
 274    white-space: nowrap;
 275    pointer-events: none;
 276    opacity: 0;
 277    transition: opacity 0.2s;
 278    z-index: 1000;
 279  }
 280  
 281  .waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
 282    opacity: 1;
 283  }
 284  
 285  .waveform-hover-time {
 286    position: absolute;
 287    bottom: calc(100% + 4px);
 288    transform: translate(50%);
 289    background: rgba(0, 0, 0, 0.9019607843);
 290    color: #fff;
 291    padding: 3px 7px;
 292    border-radius: 4px;
 293    font-size: 11px;
 294    font-variant-numeric: tabular-nums;
 295    white-space: nowrap;
 296    pointer-events: none;
 297    opacity: 0;
 298    transition: opacity 0.15s;
 299    z-index: 1000;
 300  }
 301  
 302  .waveform-seek-handle {
 303    position: absolute;
 304    top: 50%;
 305    right: 0;
 306    width: 11px;
 307    height: 11px;
 308    border-radius: 50%;
 309    background: #fff;
 310    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
 311    transform: translate(50%, -50%) scale(0);
 312    opacity: 0;
 313    transition: opacity 0.12s ease, transform 0.12s ease;
 314    pointer-events: none;
 315    z-index: 6;
 316  }
 317  
 318  .waveform-seek-handle.is-visible {
 319    opacity: 1;
 320    transform: translate(50%, -50%) scale(1);
 321  }
 322  
 323  .waveform-seek-handle.is-active {
 324    transform: translate(50%, -50%) scale(1.25);
 325  }
 326  
 327  .waveform-btn:focus-visible {
 328    outline: 2px solid currentColor;
 329    outline-offset: 2px;
 330  }
 331  
 332  .waveform-marker:focus-visible {
 333    outline: 2px solid currentColor;
 334    outline-offset: 1px;
 335    width: 4px;
 336  }
 337  
 338  .waveform-speed {
 339    position: relative;
 340    flex-shrink: 0;
 341  }
 342  
 343  .speed-btn {
 344    background: transparent;
 345    border: 1px solid rgba(255, 255, 255, 0.2);
 346    border-radius: 4px;
 347    padding: 4px 8px;
 348    color: inherit;
 349    font-size: 11px;
 350    cursor: pointer;
 351    transition: all 0.2s;
 352    min-width: 40px;
 353  }
 354  
 355  .speed-btn:hover {
 356    background: rgba(255, 255, 255, 0.0509803922);
 357    border-color: rgba(255, 255, 255, 0.3019607843);
 358  }
 359  
 360  .speed-value {
 361    font-weight: 600;
 362  }
 363  
 364  .speed-menu {
 365    position: absolute;
 366    bottom: 100%;
 367    left: 0;
 368    margin-bottom: 4px;
 369    background: rgba(0, 0, 0, 0.9490196078);
 370    border: 1px solid rgba(255, 255, 255, 0.2);
 371    border-radius: 6px;
 372    padding: 4px;
 373    z-index: 100;
 374    min-width: 60px;
 375  }
 376  
 377  .speed-option {
 378    display: block;
 379    width: 100%;
 380    background: transparent;
 381    border: none;
 382    color: rgba(255, 255, 255, 0.7019607843);
 383    padding: 6px 12px;
 384    font-size: 12px;
 385    cursor: pointer;
 386    transition: all 0.2s;
 387    text-align: right;
 388    border-radius: 4px;
 389  }
 390  
 391  .speed-option:hover {
 392    background: rgba(255, 255, 255, 0.1019607843);
 393    color: #fff;
 394  }
 395  
 396  .speed-option.active {
 397    background: rgba(255, 255, 255, 0.1607843137);
 398    color: #fff;
 399    font-weight: 600;
 400  }
 401  
 402  .waveform-player.waveform-focused {
 403    outline: 2px solid var(--wfp-accent);
 404    outline-offset: 2px;
 405    border-radius: 4px;
 406  }
 407  
 408  .waveform-player:focus {
 409    outline: none;
 410  }
 411  
 412  .waveform-player:focus-visible {
 413    outline: 1px solid var(--wfp-accent);
 414    outline-offset: 1px;
 415  }
 416  
 417  .waveform-layout-preview .waveform-meta {
 418    display: none !important;
 419  }
 420  
 421  .waveform-layout-preview .waveform-info {
 422    justify-content: center;
 423  }
 424  
 425  .waveform-layout-preview .waveform-text {
 426    flex: 0 1 auto;
 427    align-items: center;
 428    text-align: center;
 429  }
 430  
 431  .waveform-player.waveform-focused {
 432    outline: none;
 433  }
 434  
 435  .waveform-track.waveform-align-top {
 436    align-items: flex-start;
 437  }
 438  
 439  .waveform-track.waveform-align-top .waveform-btn {
 440    margin-top: 5px;
 441  }
 442  
 443  .waveform-track.waveform-align-center {
 444    align-items: center;
 445  }
 446  
 447  .waveform-track.waveform-align-bottom {
 448    align-items: flex-end;
 449  }
 450  
 451  .waveform-track.waveform-align-bottom .waveform-btn {
 452    margin-bottom: 5px;
 453  }
 454  
 455  @media (max-width: 480px) {
 456    .waveform-btn {
 457      width: var(--wfp-btn-size, 32px);
 458      height: var(--wfp-btn-size, 32px);
 459      min-width: var(--wfp-btn-size, 32px);
 460    }
 461    .waveform-container {
 462      min-height: 50px;
 463    }
 464    .waveform-info {
 465      font-size: 12px;
 466    }
 467    .waveform-artist, .waveform-time, .waveform-bpm {
 468      font-size: 10px;
 469    }
 470  }
 471  @media (prefers-reduced-motion: reduce) {
 472    .waveform-player *, .waveform-player *:before, .waveform-player *:after {
 473      transition-duration: 0.01ms !important;
 474      animation-duration: 0.01ms !important;
 475      animation-iteration-count: 1 !important;
 476    }
 477  }
 478  .wp-block-playlist {
 479    box-sizing: border-box;
 480  }
 481  .wp-block-playlist .wp-block-playlist__waveform-player {
 482    width: 100%;
 483    margin: var(--wp--preset--spacing--20, 0.625em) 0;
 484    position: relative;
 485  }
 486  .wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
 487    outline: revert;
 488    outline-offset: revert;
 489  }
 490  .wp-block-playlist .waveform-track {
 491    height: 100px;
 492    gap: 0;
 493  }
 494  .wp-block-playlist .waveform-btn {
 495    border: none;
 496    border-radius: 0;
 497    border-end-start-radius: 0.125rem;
 498    border-start-start-radius: 0.125rem;
 499    width: 100px;
 500    height: 100px;
 501    min-width: 100px;
 502    background: currentColor;
 503    margin: 0;
 504  }
 505  .wp-block-playlist .waveform-btn:hover:not(:disabled) {
 506    transform: none;
 507  }
 508  .wp-block-playlist .waveform-btn svg {
 509    width: 3rem;
 510    height: 3rem;
 511  }
 512  .wp-block-playlist .waveform-btn .waveform-icon-pause svg {
 513    width: 2.625rem;
 514    height: 2.625rem;
 515  }
 516  .wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
 517    background-image: var(--wp--playlist--play-button-artwork);
 518    background-position: center;
 519    background-size: cover;
 520    color: #fff;
 521  }
 522  .wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
 523    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
 524  }
 525  .wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
 526    fill: #fff !important;
 527  }
 528  .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
 529    margin-bottom: 0;
 530  }
 531  .wp-block-playlist .waveform-btn:focus-visible,
 532  .wp-block-playlist .waveform-container:focus-visible {
 533    outline: revert;
 534    outline-offset: revert;
 535  }
 536  .wp-block-playlist .waveform-artist {
 537    opacity: 0.7;
 538  }
 539  .wp-block-playlist .waveform-info,
 540  .wp-block-playlist .waveform-artist,
 541  .wp-block-playlist .waveform-title,
 542  .wp-block-playlist .waveform-time {
 543    font-size: inherit;
 544  }
 545  .wp-block-playlist .wp-block-playlist__tracklist {
 546    margin: 0;
 547    padding-right: 0;
 548    list-style: none;
 549  }
 550  .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-is-hidden {
 551    display: none;
 552  }
 553  .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-artist-is-hidden .wp-block-playlist-track__artist {
 554    display: none;
 555  }
 556  .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-length-is-hidden .wp-block-playlist-track__length {
 557    display: none;
 558  }
 559  .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-show-numbers {
 560    counter-reset: playlist-track;
 561  }