Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Commit

Permalink
Define the focused state for the waveform
Browse files Browse the repository at this point in the history
  • Loading branch information
dhruvkb committed Nov 30, 2021
1 parent c7b142c commit 26688c4
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/components/AudioTrack/Waveform.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
ref="el"
class="waveform relative bg-dark-charcoal-06 overflow-hidden focus:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-pink"
class="waveform relative bg-dark-charcoal-06 border-1.5 border-tx focus:border-pink focus:outline-none overflow-hidden"
:style="{ '--unusable-height': `${Math.floor((1 - usableFrac) * 100)}%` }"
tabIndex="0"
role="slider"
Expand Down Expand Up @@ -453,6 +453,10 @@ export default {
left: var(--seek-time-left);
}
.waveform:focus {
box-shadow: 0 0 0 1px inset white;
}
.waveform:focus-visible .focus-indicator {
display: flex;
}
Expand Down

0 comments on commit 26688c4

Please sign in to comment.