summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/viewer/player/components.media/media.css
diff options
context:
space:
mode:
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.css113
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;