#toolbox_playmode>i, #toolbox_playmode>span{ display:none; } #toolbox_playmode.auto .mode-auto{ display:block; } #toolbox_playmode.single .mode-single{ display:block; } #toolbox_playmode.random .mode-random{ display:block; } #toolbox_playmode .mode-single{ font-weight: bold; } .playlist-player{ padding: 0; border: 1px solid #ccc; border-radius:0; --side-padding: .5em; } .player-controls{ position:sticky; top:42px; background:#fff; background: var(--body-bg, #fff); display:flex; gap:.5em; flex-wrap:wrap; align-items:center; padding: .5em var(--side-padding); border-bottom:1px solid #ccc; } .playlist-player .player-play{ font-size: 2em; color: #6b4f38; cursor:pointer; width: 0.9em; height: 0.9em; } .fa-play-circle:before{ content:''; display: inline-block; background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1536" height="1536" viewBox="0 0 1536 1536"%3E%3Cpath fill="%236b4f38" d="M768 0q209 0 385.5 103T1433 382.5T1536 768t-103 385.5t-279.5 279.5T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0zm384 823q32-18 32-55t-32-55L608 393q-31-19-64-1q-32 19-32 56v640q0 37 32 56q16 8 32 8q17 0 32-9z"%2F%3E%3C%2Fsvg%3E') no-repeat center/contain; width: 0.85em; height: 0.85em; vertical-align: 0.1em; } .loading .fa-play-circle:before{ background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1536" height="1536" viewBox="0 0 1536 1536"%3E%3Cpath fill="%236b4f38" d="M1511 928q0 5-1 7q-64 268-268 434.5T764 1536q-146 0-282.5-55T238 1324l-129 129q-19 19-45 19t-45-19t-19-45V960q0-26 19-45t45-19h448q26 0 45 19t19 45t-19 45l-137 137q71 66 161 102t187 36q134 0 250-65t186-179q11-17 53-117q8-23 30-23h192q13 0 22.5 9.5t9.5 22.5zm25-800v448q0 26-19 45t-45 19h-448q-26 0-45-19t-19-45t19-45l138-138Q969 256 768 256q-134 0-250 65T332 500q-11 17-53 117q-8 23-30 23H50q-13 0-22.5-9.5T18 608v-7q65-268 270-434.5T768 0q146 0 284 55.5T1297 212l130-129q19-19 45-19t45 19t19 45z"%2F%3E%3C%2Fsvg%3E') no-repeat center/contain; } .ready .fa-play-circle:before{ background: none!important; } .player-controls .player-speed__input{ border-radius: 3px; } .player-timeline{ flex-grow: 1; width:100%; order:9; } .player-total{ display:none; margin-left:auto; } .player-volume__wrap{ width:7em; display:flex; gap:.25em; align-items:center; margin-left:auto; } .player-timeline, .player-volume{ cursor:pointer; } .playlist-player .playlist{ margin:0; padding:0; } .playlist li{ display:flex; align-items:center; gap:.5em; white-space:nowrap; padding:4px var(--side-padding); border-bottom:1px solid #ccc; cursor:pointer; } .playlist li:hover{ background: #3338 } .playlist li.active{ background: #ffb10044 } .playlist .track-title{ flex-grow:1; overflow-x:hidden; /*text-overflow:ellipsis;*/ } .playlist .track-download{ max-width:1.5em; text-align:center; } .player-footer{ padding: 1em var(--side-padding); } .playlist-player progress[value]{ appearance:none; border-radius: 3px; overflow:hidden; } .playlist-player progress[value]::-webkit-progress-bar{ background-color: #ddd; } .playlist-player progress[value]::-webkit-progress-value{ background-color: #6b4f38; } .playlist-player.loading progress.player-timeline[value]::-webkit-progress-value{ background-image: repeating-linear-gradient(-45deg, #fff 0, #fff 10px, #ddd 10px, #ddd 20px); background-size:calc(10*(10px/0.707)) 100%; background-position:inherit; } .playlist-player.loading progress.player-timeline[value]{ animation: barberpole 10s linear infinite; } @keyframes barberpole { 0%{ background-position: 0 0; } 100% { background-position: calc(10*(12px/0.707)) 100%; } } .playlist-player.loading .player-play:before{ content: '\f021'; display: inline-block; animation: rotate360 2s linear infinite; } @keyframes rotate360 { 0%{ transform: rotate(0); } 100% { transform: rotate(360deg); } } @media(min-width:921px){ .player-controls{ top: 0; } .admin-bar .player-controls{ top: 30px; } } @media(min-width:1025px){ .player-controls{ flex-wrap:nowrap; } .player-timeline{ width:auto; order:unset; } .player-total{ display:unset; margin-left:unset; } .player-volume__wrap{ margin-left:unset; } } @media(max-width:520px){ #az_toolbox{ gap:0; justify-content: space-between; } #az_toolbox>*{ margin:auto; } }