wikimedia/mediawiki-extensions-MobileFrontend

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

@itemPaddingV: 0.8em;
@titleMarginV: 0.5em;
@thumbGap: 15px;
@thumbWidth: 70px;
@thumbSpace: @thumbWidth + @thumbGap;

/* stylelint-disable no-descending-specificity */

// Pages

// Lists of pages
//
// Use the mw-mf-page-list class when rendering a list of pages.
// Always render a page-list outside a .content element
//
// Markup:
// <ul class="mw-mf-page-list thumbs">
//  <li class="page-summary">
//    <div class="list-thumb"></div>
//    <div class="title"><h3>San Francisco</h3></div>
//  </li>
//  <li  class="page-summary">
//    <div class="list-thumb list-thumb-x">
//        <span class="mf-icon-image"></span>
//      </div>
//    <div class="title"><h3>New York</h3></div>
//  </li>
// </ul>
// FIXME: This should be one generic class name only
.mw-mf-page-list,
.topic-title-list,
.site-link-list {
    // needed for rotated watchstars to avoid horizontal scrollbar
    overflow: hidden;

    li {
        color: @color-subtle;
        position: relative;
        border-bottom: @border-width-base @border-style-base @border-color-muted;
        padding-top: @itemPaddingV;
        padding-bottom: @itemPaddingV;
        // avoid the gap between thumbnails
        margin: -1px 0 0;
        line-height: 19px;
        display: flex;
        align-items: center;

        a:not( .cdx-button ),
        .title {
            flex-grow: 1;
            display: block;
            text-decoration: none;
            color: @color-subtle;
        }
    }

    &.thumbs,
    &.side-list {
        li {
            padding-left: @thumbSpace;
        }
    }

    .info {
        font-size: 0.7em;
        text-transform: uppercase;
    }

    // FIXME: Add component class to all info classes in currently defined page-lists
    .info,
    .component {
        color: @color-subtle;
        line-height: 1.2;
    }

    .title {
        h3,
        .mw-mf-user,
        .component,
        .info {
            margin: @titleMarginV 0;
        }
    }

    &.thumbs {
        .title {
            // 22px is the width of the watchlist star, +2px for additional padding
            padding-right: 24px;
        }

        .list-thumb {
            background-color: var( --background-color-neutral );
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    // FIXME: rename to something more general, e.g. .side
    .list-thumb {
        position: absolute;
        width: @thumbWidth;
        height: 100%;
        top: 0;
        left: 0;
    }

    p {
        font-size: 0.9em;
        // See T65610
        line-height: normal;
    }

    &.side-list .list-thumb {
        padding-top: @itemPaddingV;
        padding-bottom: @itemPaddingV;
        color: @color-base;

        p {
            line-height: 1.2;
            margin: 0.5em 0;
        }

        .timestamp {
            // accommodate for higher font-size of h3 to the right of timestamp
            margin-bottom: 0.65em;
        }
    }
}

// FIXME: combine with a similar pattern in modules/NotificationsOverlay.less
@media all and ( min-width: @min-width-breakpoint-tablet ) {
    // FIXME: this should be one generic class name
    .page-summary-list,
    .topic-title-list,
    .site-link-list {
        padding-top: 0;
        padding-bottom: 0;
    }
}