wikimedia/mediawiki-extensions-MobileFrontend

@import 'mediawiki.skin.variables.less';
@import '../../mobile.less/mobile.variables.less';
@import '../../mobile.less/mobile.mixins.less';

.image-carousel {
    position: relative;
    height: 100%;

    .image-wrapper {
        width: 100%;
        height: 100%;
        text-align: center;
        display: table;

        .image {
            display: table-cell;
            vertical-align: middle;
            height: 100%;
            width: 100%;
        }
    }

    img {
        // Reduce jarring white flash caused by white background color of image
        // appearing before the image is loaded (T197110). Waiting to make the image
        // background white after the image load event helps in most cases, but
        // there are still peculiarities across several browsers which occasionally
        // paint the background color before the loaded (but not rendered) image. To
        // address this, a .15s background color transition delay is added which
        // attempts to coerce the browser to paint the loaded image before its
        // background color and reduce the flash effect. Smoothing transitions
        // (opacity and filter) are also used to help make the image load process
        // less jarring.
        //
        transition: background-color 0s 0.15s ease-in, opacity 0.15s ease-in, -webkit-filter 0.15s ease-in;
        transition: background-color 0s 0.15s ease-in, opacity 0.15s ease-in, filter 0.15s ease-in;
        .filter( blur( 3px ) );
        opacity: 0.8;
        // With blur filter applied, firefox (and maybe others) will show blurry
        // alt text before image loads. Making color transparent to hide this.
        color: transparent;

        // get rid of a small bottom margin and vertical scrollbar
        vertical-align: bottom;

        &.ratio-width {
            width: 100%;
        }

        &.ratio-height {
            height: 100%;
        }
    }

    .image-loaded {
        // for images with transparent background
        background: url( ../../images/checker.png ) repeat;
        opacity: 1;
        .filter( blur( 0 ) );
    }
}

.slider-button {
    position: absolute;
    top: 0;
    min-width: 60px; // T198018: A width any smaller than 60px is too small of a touch area
    bottom: 0;
    z-index: @z-indexOverlay;

    &.prev {
        left: 0;
    }

    &.next {
        right: 0;
    }

    > button {
        // imitate the mw-mmv button background
        // for better legibility on lighter backgrounds
        background-color: ~'#20212274' !important;
    }

    // targets prev/next icon.
    > * {
        .filter( drop-shadow( 0 0 4px rgba( 0, 0, 0, 0.8 ) ) );
    }
}

.load-fail-msg {
    text-align: center;
    color: @color-inverted-fixed;
    padding: 0 65px;
}

.load-fail-msg-icon {
    margin: 12px auto;
}

.load-fail-msg-text {
    margin: 8px 0;
}

.load-fail-msg-link {
    a {
        color: @color-link;
    }
}

.image-details {
    background: @background-color-base;
    display: none;
    z-index: @z-indexOverOverlay;
    bottom: 0;
    height: auto;
    max-height: 50%;
    position: fixed;
    width: 100%;
    padding: 8px 10px;
    margin: 0;
    overflow-y: auto;
    border-top: @border-width-base @border-style-base @border-color-subtle;

    &.is-visible {
        display: block;
    }

    .button {
        float: right;
    }
}