screen.less

@import "simple-lightbox/simple-lightbox.less";

/** Simple Lightbox Adjustments */
.sl-overlay {
    background-color: #000;
}

.sl-wrapper {
    .sl-counter,
    .sl-close,
    .sl-navigation button {
        color: #fff;

        &:hover {
            color: #000;
        }
    }
}

/** Gallery Styles */
div.plugin-gallery {
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.4em;

    div.gallery-page {
        display: grid;
        // column setup happens in Formatter::formatPage()
        gap: 1em;
        width: auto;
        max-width: 100%;

        figure {
            text-align: center;
            border: 1px solid @ini_border;
            margin: 0;
            padding: 0.4em;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;

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

            figcaption {
                margin-top: 0.4em;

                a {
                    display: block;

                    &.gallery-title {
                        font-weight: bold;
                    }
                }
            }
        }
    }

    &.align-full {
        width: 100%;
    }

    &.align-left {
        float: left;
        margin-right: 1em;
    }

    &.align-right {
        float: right;
        margin-left: 1em;
    }

    &.align-center {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; // wrap page selector on new line
    }

    .gallery-page-selector {
        padding-top: 0.4em;
        display: none; // hidden by default, shown by JS

        a {
            display: inline-block;
            padding: 0.2em 0.4em;
            border: 1px solid transparent;

            &.active {
                border: 1px solid @ini_border;
                border-radius: 0.4em;
            }
        }
    }
}