app/assets/stylesheets/days/_meta-panes.scss
div.meta {
@include align-items(center);
background: rgba(0, 0, 0, .5);
@include close-cursor;
color: #fff;
@include display(flex);
@include flex-wrap(wrap);
opacity: 0;
@include perspective($perspective-amount);
@include position(absolute, 0px 0px 0px 0px);
@include transition;
z-index: -1;
&.processed {
z-index: 4;
opacity: 1;
}
&.music .gallery .item .detail {
display: block;
overflow-y: scroll;
}
.item {
position: relative;
&:hover {
.detail {
opacity: 1;
}
}
.detail {
@include align-items(center);
background: rgba(0, 0, 0, .6);
@include display(flex);
@include flex-wrap(wrap);
opacity: 0;
padding: 3rem;
@include position(absolute, 0px 0px 0px 0px);
@include transition;
ol {
padding: 0;
}
li {
margin: 0 0 1rem;
}
span {
display: block;
line-height: 1.5;
width: 100%;
}
}
img, video {
display: block;
max-width: 100%;
max-height: 100%;
}
}
.gallery {
white-space: nowrap;
.item {
cursor: default;
display: inline-block;
margin: 0 2vw;
max-height: 80vh;
max-width: 60vw;
white-space: normal;
}
}
}
div.meta.places {
padding: 0 20vw;
overflow-y: scroll;
font-size: 2.25vw;
font-family: $serif;
ol {
@include align-self(flex-start);
margin: 0;
padding: 10vh 5vw;
width: 100%;
}
li {
border: .25vw solid #fff;
display: block;
margin: 0 0 2vw;
padding: .5rem .5rem .75rem;
@include transition;
width: 100%;
&:hover {
@include o-cursor;
@include transform(scale(1.1));
}
.time {
display: block;
font-family: $sans;
font-size: .8vw;
margin-top: .4vw;
}
}
}
div.meta.journal {
font-family: $serif;
font-size: 2.25vw;
line-height: 1.4;
overflow-y: scroll;
padding: 0 20vw;
article {
@include align-self(flex-start);
cursor: text;
outline: none;
padding: 10vh 5vw;
width: 100%;
}
p {
margin: 0;
}
p + p {
text-indent: 1em;
}
}
div.meta.photos {
overflow-x: scroll;
img, video {
max-height: 80vh;
}
}
div.meta.texts {
overflow-x: scroll;
.gallery .item {
list-style-type: none;
max-width: 35vw;
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
position: relative;
vertical-align: top;
word-break: break-word;
}
.contacts {
clear: both;
margin-top: 0;
}
.text {
clear: both;
margin: 1rem 0;
width: 85%;
&.sent {
float: right;
}
&.received {
float: left;
}
.time {
display: block;
font-size: .75rem;
}
.message {
font-family: $serif;
font-size: 2.25vw;
margin: 0;
}
}
}
div.meta.marker-detail {
@mixin span($units, $square: false) {
width: 6.25vw * $units;
@if $square { height: 6.25vw * $units }
}
h2 {
font-family: $serif;
font-size: 2.5vw;
margin: 0;
@include position(absolute, 12.5vh 0 0 18.75vw);
@include span(5);
}
.item, .time {
@include position(absolute, 50% 0 0 50%);
@include user-select(none);
z-index: -1;
&:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
cursor: pointer;
z-index: 4;
}
}
.item {
&.image, &.video {
@include span(4);
}
&.music {
@include span(3);
}
}
.time {
@include align-items(center);
background: #000;
border-radius: 50%;
@include display(flex);
@include flex-wrap(wrap);
padding: 3rem;
@include position(absolute, 62.5vh 0 0 18.75vw);
@include span(3, true);
z-index: 1;
span {
display: block;
}
}
}