Audio Control
CODE
×
HTML
<div class='audio-control'><div class="play-control"></div> <div class="audio-time">1:22:02 / 1:48:07</div> <div class="audio-progress"> <div class="audio-progress-handle"></div> <div class="audio-progress-bar"></div> </div> <div class="audio-options"></div> <div class="audio-options-box" style="display:none"> <a href="#" class="audio-volume"> <i class="speaker-icon"></i> <span>Lautstärke</span> </a> <a href="#" class="audio-download"> <i class="download-icon"></i> <span>Herunterladen</span> </a> <a href="#" class="audio-share"> <i class="share-icon"></i> <span>Link teilen</span> </a> </div></div>
CSS
div.audio-control { background-color: rgba(247,233,210,1); position:relative; margin-bottom: 30px; padding-top: 0; padding-right: 24px; padding-bottom: 0; padding-left: 26px; width: auto; height: 58px; max-height: 58px; min-height: 58px; } @media screen and (max-width: 767px) { div.audio-control { margin-left: -2px; } } div.audio-control { border-radius: 29px; display: inline-flex; align-items: center; } div.audio-progress { width: 100px; height: 24px; background: transparent; display: inline-flex; align-items: center; margin: 0 20px 0 25px; position: relative; flex: none; } div.audio-progress-bar { width: 100px; height: 8px; background: #fff; border-radius: 4px; position: absolute; } div.audio-progress-handle { width: 18px; height: 18px; background: #000; border-radius: 50%; position: absolute; z-index: +1; transform: translateX(-9px); } div.audio-control div.play-control { width: 20px; height: 20px; margin: 0 12px 0 0; flex: none; } div.audio-options { flex: none; } div.audio-options-box { position: absolute; z-index: +2; right: 13px; top: 48px; } @media screen and (max-width: 400px) { div.audio-time { display: none; } div.audio-progress { margin: 0 20px 0 10px; } div.audio-options-box { left: -20px; right: unset; } }
JS
Audio Control
Erstellt: 21.07.2021 - 13:24 Uhr
Letzte Änderung: 25.07.2021 - 16:25 Uhr
×
1:22:02 / 1:48:07
Lautstärke
Herunterladen
Link teilen