meta-lightbox/src/scss/meta-lightbox.scss

@import '_variables';

.meta-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;

    &.meta-lightbox-open {
        visibility: visible;
        opacity: 1;
    }
}

.meta-lightbox-wrap {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.meta-lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: row;
    color: $white;
    width: 100%;
    height: 100%;

    .meta-lightbox-ajax {
        color: $body-color;
    }

    .meta-lightbox-zoom-wrapper {
        display: block;
        height: 100%;
        width: 100%;

        &:after {
            color: $white;
            font: normal normal normal 14px/1 FontAwesome;
            content: '\f00e';
            position: absolute;
            right: 1em;
            bottom: 1em;
            right: 1em;
            text-shadow: 1px 1px 1px $black;
        }

        &.no-zoom {
            &:after {
                display: none;
            }
        }
    }
}

.meta-lightbox-title-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    text-align: center;
}

.meta-lightbox-nav {
    display: none;
}

.meta-lightbox-prev {
    position: absolute;
    top: 50%;
    left: 0;
}

.meta-lightbox-next {
    position: absolute;
    top: 50%;
    right: 0;
}

.meta-lightbox-close {
    position: absolute;
    top: 2%;
    right: 2%;
    line-height: 1em;
}

.meta-lightbox-image {
    text-align: center;

    img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        vertical-align: middle;
    }
}

.meta-lightbox-content iframe {
    width: 100%;
    height: 100%;
}

.meta-lightbox-inline,
.meta-lightbox-ajax {
    max-height: 100%;
    overflow: auto;
}

.meta-lightbox-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: $white;
    text-shadow: 0 1px 1px $black;
    .alert {
        margin: 0;
        text-shadow: none;
    }
}

.meta-lightbox-error p {
    display: table-cell;
    vertical-align: middle;
}

/* Effects
 **********************************************/
.meta-lightbox-notouch .meta-lightbox-effect-fade,
.meta-lightbox-notouch .meta-lightbox-effect-fadeScale,
.meta-lightbox-notouch .meta-lightbox-effect-slideLeft,
.meta-lightbox-notouch .meta-lightbox-effect-slideRight,
.meta-lightbox-notouch .meta-lightbox-effect-slideUp,
.meta-lightbox-notouch .meta-lightbox-effect-slideDown,
.meta-lightbox-notouch .meta-lightbox-effect-fall {
    transition: all 0.2s ease-in-out;
}

/* fadeScale */
.meta-lightbox-effect-fadeScale .meta-lightbox-wrap {
    transition: all 0.3s;
    transform: scale(0.7);
}

.meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap {
    transform: scale(1);
}

/* slideLeft / slideRight / slideUp / slideDown */
.meta-lightbox-effect-slideLeft .meta-lightbox-wrap,
.meta-lightbox-effect-slideRight .meta-lightbox-wrap,
.meta-lightbox-effect-slideUp .meta-lightbox-wrap,
.meta-lightbox-effect-slideDown .meta-lightbox-wrap {
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.meta-lightbox-effect-slideLeft .meta-lightbox-wrap {
    transform: translateX(-10%);
}

.meta-lightbox-effect-slideRight .meta-lightbox-wrap {
    transform: translateX(10%);
}

.meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap,
.meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap {
    transform: translateX(0);
}

.meta-lightbox-effect-slideDown .meta-lightbox-wrap {
    transform: translateY(-10%);
}

.meta-lightbox-effect-slideUp .meta-lightbox-wrap {
    transform: translateY(10%);
}

.meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap,
.meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap {
    transform: translateY(0);
}

/* fall */
.meta-lightbox-body-effect-fall .meta-lightbox-effect-fall {
    perspective: 1000px;
}

.meta-lightbox-effect-fall .meta-lightbox-wrap {
    transition: all 0.3s ease-out;
    transform: translateZ(300px);
}

.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap {
    transform: translateZ(0);
}

@import 'meta-lightbox-theme';