diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player/components.media/media.css')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/components.media/media.css | 113 |
1 files changed, 95 insertions, 18 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 62eb9af..f552eba 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 @@ -1,3 +1,90 @@ +/* heading and caption */ + +.viewer-fullscreen .heading { + font-family: "Freight Text", serif; + font-size: 3rem; + line-height: 1.28; + width: 80%; + margin: 4rem auto 0 auto; + padding-bottom: 1rem; + text-align: center; +} +.viewer-fullscreen .citation { + width: 45rem; + margin: 0 auto 3rem auto; + padding: 1rem 0; + font-family: "Neue Haas Unica"; + color: #888; +} + +.viewer-fullscreen .fullscreen-element.gallery, +.viewer-fullscreen .fullscreen-element.carousel, +.viewer-fullscreen .fullscreen-element.vitrine { + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.viewer-fullscreen .fullscreen-element.gallery .citation, +.viewer-fullscreen .fullscreen-element.carousel .citation, +.viewer-fullscreen .fullscreen-element.vitrine .citation { + margin-top: 3rem; +} + +/* arrows and dots */ + +.carousel-nav .arrow-prev { + position: absolute; + left: 1rem; + top: 50%; + margin-top: -3.5rem; + transform: translateY(-50%); + cursor: pointer; +} +.carousel-nav .arrow-next { + position: absolute; + right: 1rem; + top: 50%; + margin-top: -3.5rem; + transform: translateY(-50%); + cursor: pointer; +} +.carousel-nav .arrow { + width: 4rem; +} +.carousel-nav .arrow-disabled { + cursor: default; + opacity: 0.2; +} +.carousel-nav .dots { + position: absolute; + bottom: 5.5rem; + left: 0; + width: 100%; + display: flex; + padding: 10px 0; + justify-content: center; +} +.dots .dot-item { + cursor: pointer; + opacity: 0.2; + margin: 0; + padding: 15px 7px; + background: transparent; + cursor: pointer; +} +.dots .dot-circle { + border-radius: 50%; + background: #000; + width: 10px; + height: 10px; +} +.dots .dot-item:focus { + outline: none; +} +.dots .dot-item.active { + opacity: 1.0; +} + /* carousel */ .carousel-container { @@ -6,12 +93,18 @@ padding: 1rem; } .carousel-item { - height: calc(100vh - 9rem); - width: 50vw; background-size: contain; background-position: center center; background-repeat: no-repeat; } +.player-transcript .carousel-item { + width: 50vw; + height: calc(100vh - 9rem); +} +.viewer-fullscreen .carousel-item { + width: 50vw; + height: calc(100vh - 8rem); +} /* gallery */ @@ -91,22 +184,6 @@ /* vitrine */ -.vitrine .heading { - font-family: "Freight Text", serif; - font-size: 3rem; - line-height: 1.28; - width: 80%; - margin: 0 auto; - padding-bottom: 2rem; - text-align: center; -} -.vitrine .citation { - width: 45rem; - margin: 0 auto; - padding: 1rem 0; - font-family: "Neue Haas Unica"; - color: #888; -} .vitrine-items { display: flex; flex-flow: row wrap; |
