vitrine modal

1 files changed, 63 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
index 370e588..be32184 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.css
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -31,6 +31,7 @@
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
+  background-color: #eee;
 }
 .vitrine-modal .vitrine-text {
   background: white;
@@ -64,3 +65,65 @@
 .vitrine-modal .vitrine-close svg line {
   stroke: #000;
 }
+
+/* vitrine prev/next buttons */
+
+.vitrine-nav {
+  position: absolute;
+  bottom: 0;
+  transition: 0.1s transform;
+  transform: translateZ(0) translateY(9rem);
+  cursor: pointer;
+  color: #000;
+  font-size: 18px;
+}
+.vitrine-nav:hover {
+  transform: translateZ(0) translateY(0);
+}
+.vitrine-nav.prev {
+  left: 0;
+}
+.vitrine-nav.next {
+  right: 0;
+}
+.vitrine-nav .vitrine-nav-content {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  height: 3rem;
+}
+.vitrine-nav.prev .vitrine-nav-content {
+  align-items: center;
+  justify-content: flex-start;
+}
+.vitrine-nav.next .vitrine-nav-content {
+  align-items: center;
+  justify-content: flex-end;
+}
+.vitrine-nav .vitrine-nav-thumbnail {
+  width: 12rem;
+  height: 8rem;
+  margin: 0.5rem;
+  border-radius: 1rem;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: #eee;
+}
+.vitrine-nav .arrow {
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.vitrine-nav .arrow.left,
+.vitrine-nav .arrow.right {
+  width: 1.25rem;
+}
+.vitrine-nav .arrow svg {
+  width: 100%;
+  height: 100%;
+}
+