MTRNord's Wiki

Template:Portal Box/styles.css: Difference between revisions

Browse history interactively
MTRNord (talk | contribs)
Bureaucrats, Check users, Interface administrators, Administrators, Temporary account IP viewers
110 edits
Created page with "→* Portal grid layout + card styling. * Usage: wrap <div class="mw-portal-grid">...</div> around multiple {{Portal box}} calls.: →Grid container — place this on the page wrapping the boxes: .mw-portal-grid { display: flex; flex-flow: row wrap; gap: 16px; margin: 1em 0; } →Individual card: .mw-portal-box { flex: 1 1 220px; →grow, shrink, min-width — gives ~3 col on desktop: break-inside: avoid; border: 1px solid v..."
 
No edit summary
 
Line 1: Line 1:
/*
/*
  * Portal grid layout + card styling.
  * Portal grid layout + section card styling.
  * Usage: wrap <div class="mw-portal-grid">...</div> around multiple {{Portal box}} calls.
  * Adapted from Template:Navigation_Wikimedia_infrastructure/style.css
*
* Outer wrapper pattern (place on the page, not in this template):
*  <div class="infranav infranav--portal">
*    <div class="infranav-title">Title</div>
*    <div class="infranav-contents">{{Portal Box|...}} ...</div>
*  </div>
*
* Each {{Portal Box}} call generates one .infranav-section.
  */
  */


/* Grid container — place this on the page wrapping the boxes */
/* ── Outer container ─────────────────────────────────────────────────────── */
.mw-portal-grid {
.infranav {
    border: 1px solid var(--border-color-base, #a2a9b1);
    background: var(--background-color-neutral-subtle, #f8f9fa);
    color: var(--color-base, #202122);
    font-size: 88%;
    line-height: 1.5;
}
 
/* ── Portal mode ─────────────────────────────────────────────────────────── */
.infranav--portal {
    float: none;
    max-width: initial;
    clear: both;
    margin: 1em 0;
}
.infranav--portal .infranav-title {
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
    background: #3366cc;
    color: #fff;
    border-bottom: 1px solid var(--border-color-base, #a2a9b1);
}
.infranav--portal .infranav-contents {
    margin: 0 8px;
    padding: 8px 0;
     display: flex;
     display: flex;
     flex-flow: row wrap;
     flex-flow: row wrap;
     gap: 16px;
     gap: 16px;
    margin: 1em 0;
}
}
 
.infranav--portal .infranav-section {
/* Individual card */
.mw-portal-box {
    flex: 1 1 220px;      /* grow, shrink, min-width — gives ~3 col on desktop */
     break-inside: avoid;
     break-inside: avoid;
     border: 1px solid var(--border-color-base, #a2a9b1);
     flex: 1 1 180px;
     background: var(--background-color-neutral-subtle, #f8f9fa);
     min-width: 160px;
     color: var(--color-base, #202122);
}
     min-width: 180px;
.infranav--portal .infranav-heading {
     max-width: 340px;
    font-weight: bold;
     border-bottom: 1px solid var(--border-color-base, #a2a9b1);
     margin-bottom: 4px;
     padding-bottom: 2px;
}
}


.mw-portal-box-title {
/* ── Sidebar mode ────────────────────────────────────────────────────────── */
.infranav--sidebar {
    float: right;
    clear: right;
    width: 14em;
    margin: 0 0 1em 1em;
}
.infranav--sidebar .infranav-title {
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
     background: #3366cc;
     background: #3366cc;
     color: #fff;
     color: #fff;
     font-weight: bold;
     border-bottom: 1px solid var(--border-color-base, #a2a9b1);
    font-size: 95%;
    padding: 4px 8px;
}
}
 
.infranav--sidebar .infranav-contents {
.mw-portal-box-content {
     padding: 4px 0;
     padding: 4px 8px 6px;
    font-size: 90%;
}
}
.mw-portal-box-content ul {
.infranav--sidebar .infranav-heading {
     margin: 4px 0 0 1.2em;
     font-weight: normal;
     padding: 0;
     margin: 1px 0 0 0;
}
}
.mw-portal-box-content li {
.infranav--sidebar .infranav-heading a {
     margin: 2px 0;
    display: block;
    border-top: 1px solid var(--border-color-base, #a2a9b1);
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
    color: var(--color-base, #202122);
     margin: 0 -8px;
    padding: 4px 8px 0 8px;
}
}
 
.infranav--sidebar .infranav-heading a:hover {
/* Colour variants for the title bar */
    background-color: var(--background-color-base, #fff);
.mw-portal-box-green  .mw-portal-box-title { background: #2e7d32; }
    color: var(--color-emphasized, #000);
.mw-portal-box-teal  .mw-portal-box-title { background: #117a8b; }
.mw-portal-box-purple .mw-portal-box-title { background: #6a1b9a; }
.mw-portal-box-red    .mw-portal-box-title { background: #b71c1c; }
.mw-portal-box-orange .mw-portal-box-title { background: #e65100; }
.mw-portal-box-grey  .mw-portal-box-title { background: #546e7a; }
 
/* Responsive: 2 columns on narrow, 1 on mobile */
@media screen and (max-width: 719px) {
    .mw-portal-box { flex-basis: 45%; }
}
}
@media screen and (max-width: 479px) {
.infranav--sidebar .infranav-section {
     .mw-portal-box { flex-basis: 100%; max-width: 100%; }
     padding: 0 8px;
}
}


/* Dark mode — card body only; title bars keep their colour (white text already contrasts) */
/* ── Shared list styles ──────────────────────────────────────────────────── */
.infranav .infranav-section ul { margin-top: unset !important; margin-bottom: 4px; }
.infranav .infranav-section li { margin: 1px 0; }
 
/* ── Dark mode ───────────────────────────────────────────────────────────── */
@media screen {
@media screen {
     html.skin-theme-clientpref-night .mw-portal-box-grey .mw-portal-box-title { background: #37474f; }
     html.skin-theme-clientpref-night .infranav--portal .infranav-title,
    html.skin-theme-clientpref-night .infranav--sidebar .infranav-title { background: #1a3a5c; }
}
}
@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
     html.skin-theme-clientpref-os .mw-portal-box-grey .mw-portal-box-title { background: #37474f; }
     html.skin-theme-clientpref-os .infranav--portal .infranav-title,
    html.skin-theme-clientpref-os .infranav--sidebar .infranav-title { background: #1a3a5c; }
}
}
Retrieved from "https://wiki.mtrnord.blog/wiki/Template:Portal_Box/styles.css"