publik-base-theme/static/toodego/_gallery.scss

109 lines
1.7 KiB
SCSS

.gru-content div.gallerycell {
border: 0;
padding: 32px 20px 20px 20px;
}
div.gallerycell {
div.main-image {
display: flex;
justify-content: center;
a {
position: relative;
display: inline-block;
img {
border: none;
}
}
a.desktop-only {
margin-right: 20px;
}
}
div.gallery-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
text-decoration: underline;
color: black;
font-weight: bold;
font-size: 1.125rem;
padding-top: 150px;
}
}
div#gallery-carrousel {
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
display: none;
height: 90vh !important;
span {
position: absolute;
color: white;
cursor: pointer;
display: block;
height: 6rem;
line-height: 6rem;
width: 6rem;
@media screen and (max-width: $desktop-limit) {
height: 3rem;
line-height: 3rem;
width: 3rem;
}
text-align: center;
&::after {
font-family: FontAwesome;
font-size: 1.5rem;
}
&.exit {
top: 2%;
right: 2%;
&::after {
content: "\f00d"; // times
}
@media screen and (max-width: $desktop-limit) {
top: 0;
right: 0;
}
}
&.previous {
top: 48%;
left: 2%;
&::after {
content: "\f053"; // chevron-left;
}
@media screen and (max-width: $desktop-limit) {
left: 0;
}
}
&.next {
top: 48%;
right: 2%;
&::after {
content: "\f054"; // chevron-right;
}
@media screen and (max-width: $desktop-limit) {
right: 0;
}
}
&.counter {
bottom: 0;
right: 2%;
@media screen and (max-width: $desktop-limit) {
right: 0;
}
}
}
&.single {
.previous, .next, .counter {
visibility: hidden;
}
}
}