MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 17:09, 4 June 2026

/* ═══════════════════════════════════════════════════════
   BOINC Synergy — mobile styles  (Minerva skin)
   MediaWiki:Mobile.css
   
   Common.css already loads on mobile, so this file only
   needs to handle:
     1. Minerva layout corrections
     2. Styles that Vector chrome selectors can't reach
   
   Dark mode: Minerva handles wiki/image boxes natively,
   so we don't repeat those overrides here.
═══════════════════════════════════════════════════════ */

/* ── FONT ───────────────────────────────────────────── */
/* @import already fires from common.css — no need to repeat */

/* ── HERO — stack & tighten on narrow screens ───────── */
.bs-hero {
    padding: 1.25rem 1rem 1rem;
    border-radius: 8px;
}

.bs-hero-title {
    font-size: 1.4rem;
}

.bs-hero-subtitle {
    font-size: 0.95rem;
}

/* ── STATS RIBBON — single column on very small screens  */
@media (max-width: 400px) {
    .bs-stat {
        min-width: 100%;
    }
}

/* ── STEPS — stack vertically ───────────────────────── */
.bs-step {
    min-width: 100%;
}

/* ── PROJECT TABLE — single column ─────────────────── */
.bs-project-table td {
    display: block;
    width: 100%;
    padding: 0.15rem 0;
}

/* ── INFOBOX — full-width on mobile ─────────────────── */
table.bs-infobox {
    width: 100% !important;
    float: none !important;
    margin: 0 0 1rem 0 !important;
    font-size: 0.9rem;
}

/* Minerva wraps first section in .mf-section-0 before the infobox */
.mf-section-0 > p:empty,
.mf-section-0 > p:has(> br:only-child) {
    display: none;
    margin: 0;
    padding: 0;
}

.mf-section-0 > br:first-child {
    display: none;
}

/* ── DARK MODE — mobile (Minerva) ───────────────────── */
/*
   Minerva already darkens its own chrome and standard wiki
   constructs (image frames, thumbs, wikitables) in dark mode.
   
   We only need to patch our custom .bs-* components that
   Minerva has no knowledge of, the infobox, the license box,
   and the edit textarea.
   
   Do NOT re-declare Vector chrome rules here (#mw-head,
   #mw-panel, etc.) — those IDs don't exist in Minerva.
*/
@media (prefers-color-scheme: dark) {

    /* page shell — Minerva uses .mw-body, not #content */
    .mw-body,
    .mw-body-content {
        background-color: #121212;
        color: var(--bs-text-primary);
    }

    /* ── bs-* components ──────────────────────────── */

    /* hero */
    .bs-hero {
        background: linear-gradient(135deg, var(--bs-purple-50) 0%, var(--bs-teal-50) 100%);
        border-color: var(--bs-purple-200);
    }

    /* quote */
    .bs-quote {
        background: var(--bs-gray-50);
        border-left-color: var(--bs-gray-200);
    }

    /* definition */
    .bs-definition {
        background: var(--bs-purple-50);
        border-left-color: var(--bs-purple-400);
        color: var(--bs-purple-800);
    }

    /* CTA box */
    .bs-cta {
        background: var(--bs-page-bg);
        border-color: var(--bs-purple-400);
    }
    .bs-cta-title { color: var(--bs-purple-800); }
    .bs-cta-body  { color: var(--bs-text-muted);  }

    /* stat cards */
    .bs-stat-purple { background: var(--bs-purple-50); border-color: var(--bs-purple-200); }
    .bs-stat-teal   { background: var(--bs-teal-50);   border-color: var(--bs-teal-200);   }
    .bs-stat-coral  { background: var(--bs-coral-50);  border-color: var(--bs-coral-200);  }
    .bs-stat-blue   { background: var(--bs-blue-50);   border-color: var(--bs-blue-200);   }

    /* group cards */
    .bs-group-teal   { background: var(--bs-teal-50);   border-color: var(--bs-teal-200);   }
    .bs-group-purple { background: var(--bs-purple-50); border-color: var(--bs-purple-200); }
    .bs-group-blue   { background: var(--bs-blue-50);   border-color: var(--bs-blue-200);   }
    .bs-group-green  { background: var(--bs-green-50);  border-color: var(--bs-green-200);  }
    .bs-group-amber  { background: var(--bs-amber-50);  border-color: var(--bs-amber-200);  }
    .bs-group-coral  { background: var(--bs-coral-50);  border-color: var(--bs-coral-200);  }
    .bs-group-gray   { background: var(--bs-gray-50);   border-color: var(--bs-gray-200);   }
    .bs-group-pink   { background: var(--bs-pink-50);   border-color: var(--bs-pink-200);   }

    /* step cards */
    .bs-step-purple { background: var(--bs-purple-50); border-color: var(--bs-purple-200); }
    .bs-step-teal   { background: var(--bs-teal-50);   border-color: var(--bs-teal-200);   }
    .bs-step-blue   { background: var(--bs-blue-50);   border-color: var(--bs-blue-200);   }

    /* footer bar */
    .bs-footer-bar {
        border-top-color: var(--bs-gray-200);
        color: var(--bs-gray-400);
    }

    /* ── License box ────────────────────────────────── */
    /* Variables auto-remap via Common.css :root dark block;
       !important guards against Minerva's own table resets. */
    .license-box {
        background: var(--bs-gray-50) !important;
        border-color: var(--bs-gray-200) !important;
        color: var(--bs-text-primary) !important;
    }

    /* ── Edit textarea (Minerva) ────────────────────── */
    #wpTextbox1,
    .mw-editfont-default,
    textarea.mw-editfont-default {
        background-color: #1e1e1c;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }

    /* ── Infobox ────────────────────────────────────── */
    /* Mirrors common.css dark mode block but scoped for Minerva.
       Repeating is intentional — Minerva and Vector load different
       base stylesheets, so the !important cascade differs. */
    table.bs-infobox {
        background: #1e1e1c !important;
        color: var(--bs-text-primary) !important;
        border-color: #3a3a38 !important;
    }

    table.bs-infobox th,
    table.bs-infobox td {
        background: #1e1e1c !important;
        color: var(--bs-text-primary) !important;
        border-color: #2e2e2c !important;
    }

    .bs-infobox-title {
        background: #1e1a3a !important;
        color: var(--bs-purple-900) !important;
    }

    table.bs-infobox th.bs-infobox-section,
    table.bs-infobox td.bs-infobox-section {
        background: #323230 !important;
        color: var(--bs-gray-850) !important;
    }

    table.bs-infobox .bs-infobox-logo,
    table.bs-infobox .bs-infobox-screenshot {
        background: #252523 !important;
    }

    table.bs-infobox .bs-infobox-caption {
        color: var(--bs-text-muted) !important;
    }

    table.bs-infobox tr.bs-infobox-active th,
    table.bs-infobox tr.bs-infobox-active td,
    table.bs-infobox th.bs-infobox-active,
    table.bs-infobox td.bs-infobox-active {
        background: #0d2b0d !important;
        color: #7ee8a2 !important;
    }

    table.bs-infobox tr.bs-infobox-inactive th,
    table.bs-infobox tr.bs-infobox-inactive td,
    table.bs-infobox th.bs-infobox-inactive,
    table.bs-infobox td.bs-infobox-inactive {
        background: #2b0d0d !important;
        color: #f5a8a8 !important;
    }

    table.bs-infobox td.bs-infobox-ended {
        color: #f5a8a8 !important;
    }

    table.bs-infobox th.bs-infobox-statsdate,
    table.bs-infobox td.bs-infobox-statsdate {
        background: #2d2040 !important;
        color: #C4BAFF !important;
    }

    /* ── TOC ────────────────────────────────────────── */
    /* Minerva renders its own TOC drawer; this patches the
       inline TOC if present (e.g. on desktop-redirected pages) */
    #toc {
        background-color: #1e1e1c;
        border-color: #333331;
        color: var(--bs-text-primary);
    }
    #toc a       { color: var(--bs-link); }
    #toc a:hover { color: var(--bs-link-hover); }

    /* category links */
    #catlinks {
        background-color: #1e1e1c;
        border-color: #333331;
        color: var(--bs-text-muted);
    }
    #catlinks a       { color: var(--bs-link); }
    #catlinks a:hover { color: var(--bs-link-hover); }

} /* end @media (prefers-color-scheme: dark) */