MediaWiki:Mobile.css: Difference between revisions

Revision as of 08:03, 19 August 2026

/* WikiDeal Mobile.css — loaded by MobileFrontend (Minerva skin) */

/* Approved Revs notice: visible yellow box on mobile too */
body.approvedRevs-noapprovedrev #mw-content-subtitle,
body.approvedRevs-noapprovedrev .pre-content #mw-content-subtitle {
    background: #fef9c3;
    border: 1px solid #d4a800;
    border-left: 5px solid #f0c000;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 10px 0 16px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a3a00;
}
body.approvedRevs-noapprovedrev #mw-content-subtitle::before { content: "⚠️ "; }

/* Force the table of contents open (Minerva collapses it behind the title) */
.toc, #toc { display: block !important; }
.toc .toctitle + ul, #toc ul { display: block !important; }
.toggle-list__list { display: block !important; }

/* --- Sections always expanded on mobile (no tap-to-open) ---
   MobileFrontend (Minerva) wraps each section in a collapsible block and
   collapses it by default. WikiDeal wants every paragraph readable without
   tapping, like a fully expanded desktop article. Force all blocks open. */
.collapsible-block,
.collapsible-block-js,
section.mf-section-1,
section.mf-section-2,
section.mf-section-3 {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    /* Minerva clips collapsed sections with content-visibility:hidden. */
    content-visibility: visible !important;
}
/* Hide the open/close arrow indicator so headings look like plain titles. */
.collapsible-heading .indicator,
.section-heading .indicator,
.mw-ui-icon-mf-expand,
.mw-ui-icon-mf-collapse { display: none !important; }

/* --- ApprovedRevs banner at the BOTTOM on mobile too (Theo, 2026-08-19) ---
   In Minerva, #mw-content-subtitle is a direct child of main#content
   (siblings: .banner-container, .pre-content, #bodyContent, .post-content x2).
   Flex-reorder so the banner lands after the article body. */
body.action-view main#content.mw-body { display: flex; flex-direction: column; }
body.action-view main#content.mw-body > .banner-container { order: 1; }
body.action-view main#content.mw-body > .pre-content { order: 2; }
body.action-view main#content.mw-body > #bodyContent { order: 3; }
body.action-view main#content.mw-body > #mw-content-subtitle { order: 4; margin-top: 1.2em; }
body.action-view main#content.mw-body > .post-content { order: 5; }

/* Approved & latest: discreet small grey line on mobile as well. */
body.approvedRevs-approved #mw-content-subtitle {
    background: none;
    border: none;
    padding: 4px 0;
    margin: 8px 0 0 0;
    font-size: 0.8rem;
    font-weight: normal;
    font-style: italic;
    color: #6b7280;
}