curtain backgrounds

1 files changed, 25 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 57b3010..28ac255 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -123,14 +123,38 @@ iframe {
 .fullscreen-element.curtain .curtain-text {
   height: calc(100vh - 3rem);
   width: 100%;
+  max-width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  position: absolute;
+  top: 0; left: 0;
+}
+.fullscreen-element.curtain .curtain-background {
+  position: absolute;
+  top: 0; left: 0;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  z-index: 0;
+  transition: opacity 3.0s;
+  opacity: 0;
+}
+.fullscreen-element.curtain.fade-enter-done .curtain-background {
+  opacity: 0.3;
+}
+.fullscreen-element.curtain.fade-exit div,
+.fullscreen-element.curtain.fade-exit-done div {
+  transition: opacity 1.0s;
+  opacity: 0.0;
 }
+
 .fullscreen-element.curtain div {
   font-family: "Freight Text", serif;
-  max-width: 90%;
+  max-width: 96%;
   font-size: 10vh;
   line-height: 1;
   white-space: pre-line;