diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/modals/modals.css')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/modals/modals.css | 63 |
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%; +} + |