Dashboard
PHP:
7.4.33
OS:
Linux
User:
vqweckd
/
/
home
/
vqweckd
/
www
/
wp-includes
/
blocks
/
playlist
📤 Upload
📝 New File
📁 New Folder
Close
Editing: style.css
.waveform-player { font-family: inherit; color: inherit; line-height: var(--waveform-line-height, 1.4); --wfp-accent: #71717a; --wfp-button-color: rgba(255, 255, 255, .9); --wfp-text-color: #ffffff; --wfp-text-secondary-color: rgba(255, 255, 255, .6); --wfp-btn-artwork-color: rgba(255, 255, 255, .9); --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5); } .waveform-player.waveform-theme-light { --wfp-button-color: rgba(0, 0, 0, .8); --wfp-text-color: #333333; --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 { display: flex; align-items: center; gap: var(--waveform-track-gap, 12px); position: relative; } .waveform-btn { width: var(--wfp-btn-size, 36px); height: var(--wfp-btn-size, 36px); min-width: var(--wfp-btn-size, 36px); border-radius: var(--wfp-btn-radius, 50%); border: 2px solid currentColor; background: transparent; color: var(--wfp-button-color, inherit); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; opacity: 0.9; flex-shrink: 0; } .waveform-btn:hover:not(:disabled) { opacity: 1; transform: scale(1.05); } .waveform-btn-minimal { width: calc(var(--wfp-btn-size, 36px) * 1.1); height: calc(var(--wfp-btn-size, 36px) * 1.1); min-width: calc(var(--wfp-btn-size, 36px) * 1.1); border: none; border-radius: 0; opacity: 0.7; } .waveform-btn-minimal:hover:not(:disabled) { opacity: 1; transform: none; } .waveform-btn.waveform-btn-minimal svg { width: calc(var(--wfp-btn-size, 36px) * 0.94); height: calc(var(--wfp-btn-size, 36px) * 0.94); } .waveform-btn:disabled { cursor: not-allowed; opacity: 0.3; } .waveform-btn > * { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .waveform-btn svg { width: calc(var(--wfp-btn-size, 36px) * 0.45); height: calc(var(--wfp-btn-size, 36px) * 0.45); fill: currentColor; display: block; } .waveform-btn-has-artwork { --wfp-btn-size: 64px; --wfp-btn-radius: 8px; position: relative; overflow: hidden; border: none; color: var(--wfp-btn-artwork-color); } .waveform-btn > .waveform-btn-artwork { display: block; position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; z-index: 0; } .waveform-btn-has-artwork:after { content: ""; position: absolute; inset: 0; background: var(--wfp-btn-artwork-scrim); pointer-events: none; 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 { flex: 1; position: relative; min-height: 60px; cursor: pointer; min-width: 0; width: 100%; } .waveform-container:focus-visible { outline: 2px solid currentColor; } .waveform-container canvas { display: block; width: 100%; height: 100%; max-width: 100%; transition: opacity 0.3s ease; position: relative; z-index: 1; } .waveform-info { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 20px; } .waveform-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .waveform-title { color: var(--wfp-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .waveform-artist { color: var(--wfp-text-secondary-color); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .waveform-time { color: var(--wfp-text-secondary-color); font-size: 11px; white-space: nowrap; flex-shrink: 0; } .waveform-bpm { color: var(--wfp-text-secondary-color); font-size: 11px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .waveform-loading { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1019607843); z-index: 10; } .waveform-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); z-index: 10; } .waveform-error-text { font-size: 12px; opacity: 0.7; text-align: center; padding: 0 20px; } .waveform-markers { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .waveform-marker { position: absolute; top: 0; width: 2px; height: 100%; background: rgba(255, 255, 255, 0.5019607843); border: none; padding: 0; cursor: pointer; pointer-events: all; transition: all 0.2s; } .waveform-marker:hover { width: 4px; z-index: 20; } .waveform-marker.active { width: 4px; background: currentColor; z-index: 10; } .waveform-marker-tooltip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%); background: rgba(0, 0, 0, 0.9019607843); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1000; } .waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip { opacity: 1; } .waveform-hover-time { position: absolute; bottom: calc(100% + 4px); transform: translate(-50%); background: rgba(0, 0, 0, 0.9019607843); color: #fff; padding: 3px 7px; border-radius: 4px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 1000; } .waveform-seek-handle { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; z-index: 6; } .waveform-seek-handle.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .waveform-seek-handle.is-active { transform: translate(-50%, -50%) scale(1.25); } .waveform-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .waveform-marker:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; width: 4px; } .waveform-speed { position: relative; flex-shrink: 0; } .speed-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 4px 8px; color: inherit; font-size: 11px; cursor: pointer; transition: all 0.2s; min-width: 40px; } .speed-btn:hover { background: rgba(255, 255, 255, 0.0509803922); border-color: rgba(255, 255, 255, 0.3019607843); } .speed-value { font-weight: 600; } .speed-menu { position: absolute; bottom: 100%; right: 0; margin-bottom: 4px; background: rgba(0, 0, 0, 0.9490196078); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 4px; z-index: 100; min-width: 60px; } .speed-option { display: block; width: 100%; background: transparent; border: none; color: rgba(255, 255, 255, 0.7019607843); padding: 6px 12px; font-size: 12px; cursor: pointer; transition: all 0.2s; text-align: left; border-radius: 4px; } .speed-option:hover { background: rgba(255, 255, 255, 0.1019607843); color: #fff; } .speed-option.active { background: rgba(255, 255, 255, 0.1607843137); color: #fff; font-weight: 600; } .waveform-player.waveform-focused { outline: 2px solid var(--wfp-accent); outline-offset: 2px; border-radius: 4px; } .waveform-player:focus { outline: none; } .waveform-player:focus-visible { outline: 1px solid var(--wfp-accent); outline-offset: 1px; } .waveform-layout-preview .waveform-meta { display: none !important; } .waveform-layout-preview .waveform-info { justify-content: center; } .waveform-layout-preview .waveform-text { flex: 0 1 auto; align-items: center; text-align: center; } .waveform-player.waveform-focused { outline: none; } .waveform-track.waveform-align-top { align-items: flex-start; } .waveform-track.waveform-align-top .waveform-btn { margin-top: 5px; } .waveform-track.waveform-align-center { align-items: center; } .waveform-track.waveform-align-bottom { align-items: flex-end; } .waveform-track.waveform-align-bottom .waveform-btn { margin-bottom: 5px; } @media (max-width: 480px) { .waveform-btn { width: var(--wfp-btn-size, 32px); height: var(--wfp-btn-size, 32px); min-width: var(--wfp-btn-size, 32px); } .waveform-container { min-height: 50px; } .waveform-info { font-size: 12px; } .waveform-artist, .waveform-time, .waveform-bpm { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .waveform-player *, .waveform-player *:before, .waveform-player *:after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .wp-block-playlist { box-sizing: border-box; } .wp-block-playlist .wp-block-playlist__waveform-player { width: 100%; margin: var(--wp--preset--spacing--20, 0.625em) 0; position: relative; } .wp-block-playlist .wp-block-playlist__waveform-player:focus-visible { outline: revert; outline-offset: revert; } .wp-block-playlist .waveform-track { height: 100px; gap: 0; } .wp-block-playlist .waveform-btn { border: none; border-radius: 0; border-end-start-radius: 0.125rem; border-start-start-radius: 0.125rem; width: 100px; height: 100px; min-width: 100px; background: currentColor; margin: 0; } .wp-block-playlist .waveform-btn:hover:not(:disabled) { transform: none; } .wp-block-playlist .waveform-btn svg { width: 3rem; height: 3rem; } .wp-block-playlist .waveform-btn .waveform-icon-pause svg { width: 2.625rem; height: 2.625rem; } .wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn { background-image: var(--wp--playlist--play-button-artwork); background-position: center; background-size: cover; color: #fff; } .wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path { fill: #fff !important; } .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn { margin-bottom: 0; } .wp-block-playlist .waveform-btn:focus-visible, .wp-block-playlist .waveform-container:focus-visible { outline: revert; outline-offset: revert; } .wp-block-playlist .waveform-artist { opacity: 0.7; } .wp-block-playlist .waveform-info, .wp-block-playlist .waveform-artist, .wp-block-playlist .waveform-title, .wp-block-playlist .waveform-time { font-size: inherit; } .wp-block-playlist .wp-block-playlist__tracklist { margin: 0; padding-left: 0; list-style: none; } .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-is-hidden { display: none; } .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-artist-is-hidden .wp-block-playlist-track__artist { display: none; } .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-length-is-hidden .wp-block-playlist-track__length { display: none; } .wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-show-numbers { counter-reset: playlist-track; }
Save
Cancel