From 250527589e003420a84f36c4191d2e574f1ad28c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 30 Jun 2020 20:11:14 +0200
Subject: seeking and zooming the waveform. playing the audio

---
 animism-align/frontend/views/align/align.css | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

(limited to 'animism-align/frontend/views/align/align.css')

diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 153c481..38a1c8b 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -44,18 +44,40 @@ canvas {
   width: 100%;
   position: absolute;
   left: 0;
+  pointer-events: none;
 }
 .timeline .cursor .line {
   width: 100%;
   height: 1px;
   background: #00f;
 }
+.timeline .cursor.playCursor .line {
+  background: #ddd;
+}
 .timeline .cursor .tickLabel {
   position: absolute;
+  pointer-events: none;
   right: 6px;
   font-size: 12px;
   width: 40px;
   margin-top: -7px;
   text-align: right;
   text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; 
-}
\ No newline at end of file
+}
+.playButton {
+  position: absolute;
+  top: 0; left: 0;
+  width: 3rem; height: 3rem;
+  padding: 1rem;
+  background: #000;
+  cursor: pointer;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.playButton.playing {
+  background-image: url('/static/img/icons_pause_white.svg');
+}
+.playButton.paused {
+  background-image: url('/static/img/icons_play_white.svg');
+}
-- 
cgit v1.2.3-70-g09d2