diff --git a/src/components/audio-trimmer/audio-selector.jsx b/src/components/audio-trimmer/audio-selector.jsx index 3a76922161239aa456e49eb824901d74d2faf213..a7c0b41c2631d2554dd39575b4876bf9a282bab6 100644 --- a/src/components/audio-trimmer/audio-selector.jsx +++ b/src/components/audio-trimmer/audio-selector.jsx @@ -15,7 +15,7 @@ const AudioSelector = props => ( > {props.trimStart === null ? null : ( <Box - className={classNames(styles.absolute, styles.trimBackground, styles.startTrimBackground)} + className={classNames(styles.absolute)} style={{ left: `${props.trimStart * 100}%`, width: `${100 * (props.trimEnd - props.trimStart)}%` diff --git a/src/components/audio-trimmer/audio-trimmer.css b/src/components/audio-trimmer/audio-trimmer.css index ce7d60213ab52606ea51db54ea4a22ef107a7746..701b24effa040c196a15c7ebe5281b04bc5f0471 100644 --- a/src/components/audio-trimmer/audio-trimmer.css +++ b/src/components/audio-trimmer/audio-trimmer.css @@ -40,7 +40,6 @@ $hover-scale: 2; } .selection-background { - border: 1px solid $motion-tertiary; background: $motion-primary; opacity: 0.5; } @@ -82,6 +81,7 @@ $hover-scale: 2; so that we can use transform: translateX() using percentages. */ width: 100%; + height: 100%; border-left: 1px solid $motion-primary; border-top: none; border-bottom: none; diff --git a/src/components/audio-trimmer/playhead.jsx b/src/components/audio-trimmer/playhead.jsx index 5b3adddd64dcc3974960b73f4511f806b043f49c..be5423809e53e597e09582035245685532547b6e 100644 --- a/src/components/audio-trimmer/playhead.jsx +++ b/src/components/audio-trimmer/playhead.jsx @@ -6,7 +6,7 @@ import styles from './audio-trimmer.css'; const Playhead = props => ( <div className={styles.playheadContainer}> <div - className={classNames(styles.trimLine, styles.playhead)} + className={classNames(styles.playhead)} style={{ transform: `translateX(${100 * props.playbackPosition}%)` }}