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