diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-10-30 17:41:51 +0100 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-10-30 17:41:51 +0100 |
| commit | 90352b1c0e3f9ebcd543ce047e852fd7ca05a012 (patch) | |
| tree | 841717f00d45f2acae84c5b0d38a6c26d264e533 /animism-align/frontend/app/views/viewer/player | |
| parent | 2df2397faa49ebee2bafa82fceaaa64618b724b2 (diff) | |
hovering logic
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/player.transcript.css | 6 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/player.transcript.js | 2 |
2 files changed, 6 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 3725372..8d32abd 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -145,9 +145,13 @@ align-items: center; opacity: 0; cursor: pointer; - transition: opacity 0.2s; + transition: opacity 0.2s, transform 0.2s; + transform: translateZ(0); padding: 1.5rem; } +.audio-paused .not-scrollable .speaker-icon { + transform: translateZ(0) translateY(-3rem); +} .paragraph .speaker-icon { top: -1.5rem; left: -5.5rem; diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js index 44c5bb2..fc0b3ea 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -58,7 +58,7 @@ class PlayerTranscript extends Component { render() { const { paragraphs, color, inlineParagraphCount } = this.props.section const className = "player-transcript " + color + " " + ( - inlineParagraphCount > 2 ? 'scrollable' : '' + inlineParagraphCount > 2 ? 'scrollable' : 'not-scrollable' ) return ( <div |