From 9a0409093eac59e589e27430b2fd9a5a3dab8009 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 28 Aug 2020 16:54:37 +0200
Subject: speaker icon on paragraphs

---
 .../app/views/viewer/player/player.transcript.css  | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'animism-align/frontend/app/views/viewer/player/player.transcript.css')

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 9ca426e..47925ef 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -112,6 +112,36 @@
   transition: all 0.1s;
 }
 
+.player-transcript .paragraph {
+  position: relative;
+}
+.speaker-icon {
+  position: absolute;
+  top: 0;
+  left: -5.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  padding: 1.5rem;
+}
+.intro_paragraph .speaker-icon {
+  top: -0.75rem;
+}
+.speaker-icon svg {
+  background: black;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.speaker-icon svg path {
+  fill: white;
+}
+.paragraph:hover .speaker-icon {
+  opacity: 1;
+}
+
 /* media */
 
 .player-transcript .media {
-- 
cgit v1.2.3-70-g09d2