close button on fullscreen content

1 files changed, 16 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index eb7f973..71ff350 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -43,6 +43,7 @@
   top: 1rem;
   right: 1.75rem;
 }
+.eflux-nav .fullscreen-close,
 .eflux-nav .playToggle,
 .eflux-nav .transcript-icon {
   display: flex;
@@ -56,6 +57,7 @@
   margin-left: 1rem;
   cursor: pointer;
 }
+.eflux-nav .fullscreen-close:hover,
 .eflux-nav .playToggle:hover,
 .eflux-nav .transcript-icon:hover {
   background: #ddd;
@@ -71,6 +73,9 @@
 .eflux-nav .playToggle.paused svg {
   margin-left: 2px;
 }
+.eflux-nav .fullscreen-close svg {
+  width: 1rem;
+}
 
 .eflux-nav svg path {
   fill: #000;
@@ -94,10 +99,12 @@
   stroke: #fff;
 }
 
+.black .eflux-nav .fullscreen-close,
 .black .eflux-nav .playToggle,
 .black .eflux-nav .transcript-icon {
   background: #222;
 }
+.black .eflux-nav .fullscreen-close:hover,
 .black .eflux-nav .playToggle:hover,
 .black .eflux-nav .transcript-icon:hover {
   background: #444;
@@ -126,8 +133,15 @@
   transform: translateZ(0) translateY(1rem);
   opacity: 0;
 }
+.growl-tooltip.tooltip-close {
+  right: 10.0rem;
+  top: 5.25rem;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0) translateY(1rem);
+  opacity: 0;
+}
 .growl-tooltip.tooltip-play {
-  right: 7.0rem;
+  right: 6.0rem;
   top: 5.25rem;
   transition: opacity 0.2s, transform 0.2s;
   transform: translateZ(0) translateY(1rem);
@@ -141,6 +155,7 @@
   opacity: 0;
   cursor: pointer;
 }
+.growl-tooltip.tooltip-close.hover,
 .growl-tooltip.tooltip-eflux.hover,
 .growl-tooltip.tooltip-play.hover,
 .growl-tooltip.tooltip-transcript.hover {