Template:Portal Box/styles.css

/*
 * 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 var(--border-color-base, #a2a9b1);
    background: var(--background-color-neutral-subtle, #f8f9fa);
    color: var(--color-base, #202122);
    min-width: 180px;
    max-width: 340px;
}

.mw-portal-box-title {
    background: #3366cc;
    color: #fff;
    font-weight: bold;
    font-size: 95%;
    padding: 4px 8px;
}

.mw-portal-box-content {
    padding: 4px 8px 6px;
    font-size: 90%;
}
.mw-portal-box-content ul {
    margin: 4px 0 0 1.2em;
    padding: 0;
}
.mw-portal-box-content li {
    margin: 2px 0;
}

/* Colour variants for the title bar */
.mw-portal-box-green  .mw-portal-box-title { background: #2e7d32; }
.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) {
    .mw-portal-box { flex-basis: 100%; max-width: 100%; }
}

/* Dark mode — card body only; title bars keep their colour (white text already contrasts) */
@media screen {
    html.skin-theme-clientpref-night .mw-portal-box-grey .mw-portal-box-title { background: #37474f; }
}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .mw-portal-box-grey .mw-portal-box-title { background: #37474f; }
}