MediaWiki:Common.css: Difference between revisions

Got it. Below is a dark, subtly blue theme for Minerva plus a structured Main_Page layout. Paste the CSS into MediaWiki:Common.css (or MediaWiki:Minerva.css if you want skin-specific styling), then use the HTML on Main_Page.

CSS (Common.css)
/* Eldrasil Wiki — Dark theme with subtle blue accent */

/* Tokens /
:root {
--bg: #0f1318;
--surface: #141a21;
--surface-2: #1b232c;
--text: #e5e9f0;
--muted: #a9b4c2;
--blue: #6ea8ff; / subtle blue /
--blue-2: #89b8ff; / hover */
--link: #7fb3ff;
--link-visited: #a5c4ff;
--border: #243040;
--radius: 12px;
--shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* Global dark mode */
body.skin-minerva,
body {
color-scheme: dark;
background: var(--bg);
color: var(--text);
}

/* Constrain width on desktop so content isn't too wide /
@media (min-width: 768px) {
body.skin-minerva #mw-mf-page-center .content,
body.skin-minerva #content,
body.skin-minerva .content,
body .mw-body {
max-width: 1100px; / adjust to taste: 960–1100px */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px;
padding-right: 16px;
}
}

/* Improve line length of top-level paragraphs */
body.skin-minerva .mw-parser-output > p {
max-width: 75ch;
}

/* Links */
.mw-parser-output a,
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover, a:focus { color: var(--blue-2); }

/* Headings and common boxes */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3 {
color: var(--text);
}
.mw-parser-output table.wikitable,
.mw-parser-output .infobox {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
hr { border-color: var(--border); }

/* Messages/TOC/navboxes on dark */
.mw-message-box, .ambox, .navbox, .portal, .toc, .mw-notification {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}

/* Search inputs (Minerva) */
.skin-minerva .search-box,
.skin-minerva .mw-ui-input,
.skin-minerva input[type="search"] {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.skin-minerva input[type="search"]::placeholder { color: var(--muted); }

/* Images */
.mw-parser-output img { border-radius: 8px; }

/* Main Page specific */
body.page-Main_Page .eld-hero {
background: linear-gradient(180deg, rgba(110,168,255,0.06), rgba(110,168,255,0.02)), var(--surface);
border: 1px solid var(--border);
padding: 28px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
body.page-Main_Page .eld-hero__title {
font-size: 2rem;
margin: 0 0 8px 0;
letter-spacing: 0.2px;
}
body.page-Main_Page .eld-hero__tagline {
color: var(--muted);
margin: 0 0 16px 0;
font-size: 1rem;
}
body.page-Main_Page .eld-hero__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.eld-btn {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
}
.eld-btn--primary {
background: linear-gradient(180deg, rgba(110,168,255,0.18), rgba(110,168,255,0.08));
border-color: #2a3a52;
}
.eld-btn:hover { filter: brightness(1.1); }

/* Grid/cards */
body.page-Main_Page .eld-section-title {
margin: 22px 0 10px 0;
border-bottom: 1px solid var(--border);
padding-bottom: 6px;
}
body.page-Main_Page .eld-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 18px;
}
@media (min-width: 650px) {
body.page-Main_Page .eld-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
body.page-Main_Page .eld-grid { grid-template-columns: repeat(3, 1fr); }
}
.eld-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
box-shadow: var(--shadow);
}
.eld-card h3 { margin-top: 0; font-size: 1.1rem; }
.eld-card p { color: var(--muted); margin-bottom: 10px; }
.eld-card a { color: var(--link); }