1 files changed, 39 insertions, 16 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 5f4b84f..fea25ec 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -33,30 +33,50 @@
 
 /* arrows and dots */
 
-.carousel-nav .arrow-prev {
-  position: absolute;
-  left: 1rem;
-  top: 50%;
-  margin-top: -3.5rem;
-  transform: translateY(-50%);
-  cursor: pointer;
+.carousel-positioning {
+  position: relative;
 }
-.carousel-nav .arrow-next {
+.carousel-component .nav-arrow {
   position: absolute;
-  right: 1rem;
-  top: 50%;
-  margin-top: -3.5rem;
-  transform: translateY(-50%);
+  top: 0;
+  height: 100%;
+  max-height: calc(100vh - 19rem);
+  width: 8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
+  transition: background 0.2s, backdrop-filter 0.2s;
 }
-.carousel-nav .arrow {
+.viewer-fullscreen .carousel-component .nav-arrow {
+  max-height: calc(100vh - 19rem);
+}
+.carousel-component .nav-arrow.prev {
+  left: 0;
+}
+.carousel-component .nav-arrow.next {
+  right: 0;
+}
+.carousel-component .nav-arrow:focus {
+  background: transparent;
+  outline: 0;
+}
+.carousel-component .nav-arrow:hover {
+  backdrop-filter: contrast(344%) grayscale(100%);
+  background: rgba(255,255,255,0.9)
+}
+/*.white .carousel-component .nav-arrow { background: rgba(255,255,255,0.0); }
+.white .carousel-component .nav-arrow:hover { background: rgba(255,255,255,0.0); }
+*/.black .carousel-component .nav-arrow { background: rgba(0,0,0,0.0); }
+.black .carousel-component .nav-arrow:hover { background: rgba(0,0,0,0.0); }
+.carousel-component .arrow {
    width: 4rem;
 }
-.carousel-nav .arrow-disabled {
+.carousel-component .arrow-disabled {
   cursor: default;
   opacity: 0.2;
 }
-.carousel-nav .dots {
+.carousel-component .dots {
   position: absolute;
   bottom: 6rem;
   left: 0;
@@ -94,6 +114,9 @@
 
 /* carousel */
 
+.inline-element:nth-child(2) .carousel-container {
+  padding-top: 0rem;
+}
 .inline-element .carousel-container {
   padding-top: 1.5rem;
   margin-bottom: 1.5rem;
@@ -155,7 +178,7 @@
   height: 9rem;
   padding-top: 4rem;
 }
-.player-transcript .carousel-nav .dots {
+.player-transcript .carousel-component .dots {
   bottom: 5rem;
 }