mirror of
https://github.com/koel/koel
synced 2024-12-21 10:03:10 +00:00
42 lines
824 B
Vue
42 lines
824 B
Vue
|
<template>
|
||
|
|
<!--
|
||
|
|
A very thin wrapper around Plyr, extracted as a standalone component for easier styling and to work better with HMR.
|
||
|
|
-->
|
||
|
|
<div class="plyr">
|
||
|
|
<audio controls crossorigin="anonymous"></audio>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup></script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
// can't be scoped as it would be overridden by the plyr css
|
||
|
|
.plyr {
|
||
|
|
width: 100%;
|
||
|
|
height: 4px;
|
||
|
|
|
||
|
|
.plyr__controls {
|
||
|
|
background: transparent;
|
||
|
|
box-shadow: none;
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.plyr__progress--played[value] {
|
||
|
|
transition: .3s ease-in-out;
|
||
|
|
color: rgba(255, 255, 255, .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
.plyr__progress--played[value] {
|
||
|
|
color: var(--color-highlight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(hover: none) {
|
||
|
|
.plyr__progress--played[value] {
|
||
|
|
color: var(--color-highlight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|