2021-08-18 21:11:59 +02:00
|
|
|
@import "variables";
|
|
|
|
|
|
|
|
$module-name: "meta-MetaWindow";
|
|
|
|
|
|
|
|
.#{$module-name} {
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
// lightbox inner elements
|
|
|
|
.meta-spinner--embed,
|
|
|
|
.meta-spinner,
|
|
|
|
.meta-error {
|
|
|
|
align-items: center;
|
|
|
|
display: none;
|
|
|
|
justify-content: center;
|
|
|
|
text-align: center;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-spinner--embed,
|
|
|
|
.meta-spinner {
|
|
|
|
@include spinner_style();
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-error {
|
|
|
|
color: $clr-red;
|
|
|
|
font-size: 1.5em;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-spinner--embed {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-overlay {
|
|
|
|
align-items: center;
|
|
|
|
background: $meta-overlay-bg;
|
|
|
|
bottom: 0;
|
|
|
|
display: none;
|
|
|
|
justify-content: center;
|
|
|
|
left: 0;
|
|
|
|
position: fixed;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
z-index: 98;
|
2021-08-10 01:20:02 +02:00
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
// meta states
|
|
|
|
&--open {
|
|
|
|
display: flex;
|
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
&--loading {
|
|
|
|
.meta-spinner {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
&--error {
|
|
|
|
.meta-content {
|
2021-08-10 01:20:02 +02:00
|
|
|
justify-content: center;
|
2021-08-18 21:11:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.meta-error {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// navs
|
|
|
|
.meta-nav {
|
|
|
|
background: none;
|
|
|
|
border: 0;
|
|
|
|
color: $meta-nav-color;
|
|
|
|
font-size: $meta-nav-size;
|
|
|
|
text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
@include hover-focus() {
|
|
|
|
color: $meta-nav-color;
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
&:hover {
|
|
|
|
background: $meta-nav-hover-bg;
|
|
|
|
color: $meta-nav-hover-color;
|
|
|
|
text-decoration: none;
|
|
|
|
text-shadow: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-nav-arrow {
|
|
|
|
align-items: center;
|
|
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
|
|
font-size: $meta-nav-arrows-size;
|
|
|
|
justify-content: center;
|
|
|
|
padding: $meta-nav-padding;
|
|
|
|
position: absolute;
|
|
|
|
top: auto;
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
@include hover-focus() {
|
|
|
|
.fa,
|
|
|
|
.fas,
|
|
|
|
.far,
|
|
|
|
.fab {
|
|
|
|
transform: $meta-nav-hover-transform;
|
|
|
|
}
|
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
|
|
|
bottom: 0;
|
|
|
|
top: 0;
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
&__next {
|
|
|
|
right: 0;
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
&__prev {
|
|
|
|
left: 0;
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
|
|
|
&__next {
|
|
|
|
right: -($meta-nav-arrows-size + 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
&__prev {
|
|
|
|
left: -($meta-nav-arrows-size + 0.5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-close {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: -3rem;
|
|
|
|
width: 1.25em;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.fa,
|
|
|
|
.fas,
|
|
|
|
.far,
|
|
|
|
.fab {
|
|
|
|
transform: $meta-nav-close-hover-transform;
|
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
|
|
|
right: -($meta-nav-arrows-size + 0.5);
|
|
|
|
top: -($meta-nav-arrows-size + 0.5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-content {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
z-index: 1;
|
|
|
|
|
2021-09-06 20:33:22 +02:00
|
|
|
@media (min-width: map-get($grid-breakpoints, "md")) {
|
|
|
|
height: 80%;
|
|
|
|
}
|
2021-08-18 21:11:59 +02:00
|
|
|
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
|
|
|
height: 90%;
|
|
|
|
height: calc(90% - 3rem);
|
|
|
|
width: 90%;
|
|
|
|
width: calc(90% - 3rem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.meta-wrap {
|
|
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
|
|
margin: 0 auto;
|
|
|
|
max-height: 100%;
|
|
|
|
max-width: 100%;
|
|
|
|
overflow: auto;
|
|
|
|
width: 100%;
|
|
|
|
word-break: break-word;
|
|
|
|
|
|
|
|
img {
|
|
|
|
max-height: 100%;
|
|
|
|
max-width: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Lightbox types
|
|
|
|
|
|
|
|
&--text {
|
2021-08-10 01:20:02 +02:00
|
|
|
.meta-content {
|
2021-08-18 21:11:59 +02:00
|
|
|
background: $meta-text-wrapper-bg;
|
|
|
|
color: $meta-text-wrapper-color;
|
|
|
|
padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
|
|
|
|
padding-right: 0;
|
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
.meta-wrap {
|
|
|
|
padding-right: $meta-text-wrapper-padding-width;
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
2021-08-18 21:11:59 +02:00
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
|
2021-08-18 21:11:59 +02:00
|
|
|
&--image,
|
|
|
|
&--video {
|
|
|
|
.typography,
|
2021-08-10 01:20:02 +02:00
|
|
|
.meta-wrap {
|
2021-08-18 21:11:59 +02:00
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
min-height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
img {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--video,
|
|
|
|
&--embed {
|
|
|
|
@include responsive-ratio($meta-video-width, $meta-video-height, true);
|
|
|
|
|
|
|
|
a[rel="nofollow noreferrer noopener"] {
|
|
|
|
color: $meta-embed-loading-failed-color;
|
|
|
|
font-size: $meta-embed-loading-failed-size;
|
|
|
|
font-weight: $meta-embed-loading-failed-weight;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: "Unable to load. Please follow the provided link: ";
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
iframe {
|
|
|
|
height: 100%;
|
|
|
|
left: 0;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|
2021-08-18 21:11:59 +02:00
|
|
|
}
|
2021-08-10 01:20:02 +02:00
|
|
|
}
|