diff --git a/public/css/style.css b/public/css/style.css index c4e245a6..e0402f51 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1658,3 +1658,93 @@ a, a:hover, a:active { } /*# sourceMappingURL=style.css.map */ + +.audioplayer .waveform { + cursor: pointer; + position: relative; +} + +.audioplayer .hover { + position: absolute; + left: 0; + top: 0; + z-index: 10; + pointer-events: none; + height: 100%; + width: 0; + mix-blend-mode: overlay; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + transition: opacity 0.2s ease; +} + +.audioplayer .waveform:hover .hover { + opacity: 1; +} + +.audioplayer .time, +.audioplayer .duration { + position: absolute; + z-index: 11; + top: 50%; + margin-top: -1px; + transform: translateY(-50%); + font-size: 11px; + background: rgba(0, 0, 0, 0.75); + padding: 2px; + color: #ddd; +} + +.audioplayer .time { + left: 0; +} + +.audioplayer .duration { + right: 0; +} + +.audioplayer .audio-controls { + width: 100%; + justify-content: center; + display: flex; +} + +.audioplayer .audio-controls .btn { + padding-left: 0; + padding-right: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-transform: none; +} + +@media(max-width:720px) { + .audioplayer .audio-controls .btn label { + display: none; + } +} + +.audioplayer .audio-controls .btn.btn-play { + flex: 50% 1 0; +} + +.audioplayer .volume-controls { + display: flex; +} + +.audioplayer .volume-controls .volume-slider { + flex: 100% 1 1; +} + +.audioplayer .audio-controls .btn, +.audioplayer .volume-controls .btn-toggle-mute { + flex: 100px 1 1; + padding: 10px 0px 10px 0px; + background: #5ba8f4; + border-radius: 5px; + border-color: solid 1px #0f259d; + color: white; + font-family: Nunito, serif; + text-align: center; + text-decoration: none; +} \ No newline at end of file diff --git a/resources/views/widgets/audioplayer.blade.php b/resources/views/widgets/audioplayer.blade.php index d24d247d..72efe1c5 100644 --- a/resources/views/widgets/audioplayer.blade.php +++ b/resources/views/widgets/audioplayer.blade.php @@ -174,95 +174,3 @@ @endif - - \ No newline at end of file