Files
spot/style/_lightbox.scss

105 lines
1.6 KiB
SCSS

@import 'lightbox/lightbox';
@mixin lightbox-icon($icon) {
background: none;
font-size: 2em;
@extend .fa;
@extend .#{$fa-css-prefix}-#{$icon};
}
.lightboxOverlay {
bottom: 0;
right: 0;
}
.lightbox {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.lb-outerContainer {
margin: 0;
border-radius:0;
background-color: rgba(255, 255, 255, 0.5);
.lb-image {
image-orientation: from-image;
border: none;
}
.lb-nav a.lb-prev, .lb-nav a.lb-next {
color: white;
text-decoration: none;
&:before {
position: absolute;
top: calc(50% - 1em);
}
}
.lb-nav a.lb-prev {
@include lightbox-icon(prev);
&:before {
left: 2em;
}
}
.lb-nav a.lb-next {
@include lightbox-icon(next);
&:before {
right: 2em;
}
}
}
.lb-dataContainer {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
width: 200px;
max-width: 100%;
flex: 0 0 auto;
overflow: hidden;
.lb-data {
padding: 1em 0 0 1em;
.lb-details {
float: none;
.lb-caption-taken, .lb-caption-posted {
cursor: default;
display: block;
}
.lb-caption-taken {
margin-top: 1em;
}
.lb-number {
padding: 0;
margin-top: 2em;
}
}
.lb-closeContainer {
display: none !important;
margin-top: 2em;
.lb-close {
@include lightbox-icon(close);
float: none;
}
}
}
}
.lb-cancel {
@include lightbox-icon(cancel);
@extend .flicker;
color: #CCC;
}
}