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