wikimedia/mediawiki-extensions-MobileFrontend

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

@thumbGap: 15px;
@thumbWidth: 70px;
@clearIconRightGutterWidth: 0.5em;

.language-overlay,
.search-overlay {
    .search-box {
        &::before {
            content: '';
            .cdx-mixin-css-icon( @cdx-icon-search, @param-fill-color: @color-subtle, @param-size-icon: @size-icon-medium );
            position: absolute;
            left: 6px;
            top: 8px;
        }

        input {
            color: @color-base;
        }
    }
}

.overlay.search-overlay {
    background: @background-color-base;

    .spinner-container {
        background-color: @background-color-base;
        bottom: 0;
        display: none;
        left: 0;
        opacity: 0.7;
        right: 0;
        z-index: @z-indexOverOverlay;

        .spinner {
            display: block;
            left: 50%;
            margin-left: -( @size-icon + @width-icon-gutter * 2 ) / 2;
            position: absolute;
            top: 10%;
        }
    }

    .search-box {
        display: block;
    }

    .results,
    .search-feedback {
        // don't use background to preserve .loading properties
        background-color: @background-color-base;
    }

    .overlay-header {
        background-color: @background-color-transparent;
    }

    // The search overlay header is a little special so make some tweaks to the CSS
    // while using the same HTML.
    .header-cancel {
        display: none;
    }

    .header-action {
        width: auto;
    }

    .overlay-title {
        // because the clear icon is absolutely positioned
        position: relative;
        padding-left: 15px;
    }

    .header input {
        // save space for the clear icon
        padding-right: ( @size-icon + @width-icon-gutter + @clearIconRightGutterWidth );

        // See https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx (T102325)
        &::-ms-clear {
            display: none;
        }
    }

    .overlay-content {
        position: relative;
        // used to close the overlay in firefox
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .search-content {
        background-color: var( --background-color-interactive-subtle );
        border-top: @border-width-base @border-style-base @border-color-subtle;
        border-bottom: @border-width-base @border-style-base @border-color-subtle;
        cursor: pointer;

        .caption {
            padding: 1em 0;
            padding-left: 12px;
        }
    }

    .results {
        box-shadow: 0 3px 3px 0 rgba( 117, 117, 117, 0.3 );

        li:last-child {
            border-bottom: 0;
        }

        h2 {
            font: inherit;
        }
    }

    li.page-summary {
        min-height: @thumbWidth;

        h3 {
            margin: 0;
            font-weight: normal;

            strong {
                text-decoration: none;
            }
        }

        .wikidata-description {
            font-size: 13px;
            margin-top: 9px;
        }
    }

    .search-feedback {
        box-shadow: 0 3px 3px 0 rgba( 117, 117, 117, 0.3 );
        border-top: @border-width-base @border-style-base @border-color-subtle;
        font-size: 0.8em;
        padding: 0.5em 1em;
    }

    &.no-results .search-feedback {
        border-top: 0;
    }

    &.visible {
        animation: fadeIn 0.5s;
    }

    // see T156509
    &.overlay-ios {
        animation: none;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}