1 files changed, 39 insertions, 7 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index d04b85c..487c04e 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -4,6 +4,10 @@
   left: 0;
   width: 100%;
   z-index: 10;
+  transition: width 0.2s;
+}
+.eflux-header.transcript-open {
+  width: calc(100vw - 31.875rem);
 }
 .eflux-logo {
   position: absolute;
@@ -19,27 +23,55 @@
   height: 28px;
 }
 .eflux-nav {
+  display: flex;
+  flex-direction: row;
   position: absolute;
   top: 23px;
   right: 32px;
 }
-.eflux-nav svg {
-  width: 26px;
-  height: 20px;
+.eflux-nav .playToggle,
+.eflux-nav .transcript-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  background: white;
+  border-radius: 50%;
   margin-left: 34px;
+  cursor: pointer;
+}
+.eflux-nav svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.eflux-nav .playToggle svg {
+  width: 2rem;
+  height: 2rem;
+}
+.eflux-nav .playToggle.paused svg {
+  margin-left: 2px;
+}
+
+.eflux-nav svg path {
+  fill: #000;
+}
+.eflux-nav svg line {
+  stroke: #000;
 }
 
-.eflux-header svg path {
+.eflux-logo svg path {
   fill: #000;
   transition: fill 0.5s;
 }
-.eflux-header svg line {
+.eflux-logo svg line {
   stroke: #000;
   transition: stroke 0.5s;
 }
-.eflux-header.black svg path {
+.eflux-logo.black svg path {
   fill: #fff;
 }
-.eflux-header.black svg line {
+.eflux-logo.black svg line {
   stroke: #fff;
 }