Jump to content

MediaWiki:Common.css: Difference between revisions

From Eldrasil Wiki
Undo revision 31 by Admin (talk)
No edit summary
Line 13: Line 13:
}
}


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.
.skin-minerva,
 
.skin-minerva body {
CSS (Common.css)
background-color: #0f1318 !important;
/* Eldrasil Wiki — Dark theme with subtle blue accent */
color: #e5e9f0 !important;
 
/* 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;
color-scheme: dark;
background: var(--bg);
color: var(--text);
}
}
 
@media (min-width: 720px) {
/* Constrain width on desktop so content isn't too wide /
.skin-minerva #mw-mf-page-center .content,
@media (min-width: 768px) {
.skin-minerva .content,
body.skin-minerva #mw-mf-page-center .content,
.skin-minerva #content,
body.skin-minerva #content,
.skin-minerva .mw-body {
body.skin-minerva .content,
max-width: 960px;
body .mw-body {
max-width: 1100px; / adjust to taste: 960–1100px */
margin-left: auto !important;
margin-left: auto !important;
margin-right: auto !important;
margin-right: auto !important;
Line 55: Line 31:
}
}
}
}
 
.skin-minerva .mw-parser-output > p {
/* Improve line length of top-level paragraphs */
body.skin-minerva .mw-parser-output > p {
max-width: 75ch;
max-width: 75ch;
}
}
 
.skin-minerva .mw-parser-output a,
/* Links */
.skin-minerva a {
.mw-parser-output a,
color: #7fb3ff !important;
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,
.skin-minerva a:visited { color: #a5c4ff !important; }
.mw-parser-output .infobox {
.skin-minerva a:hover,
background: var(--surface);
.skin-minerva a:focus { color: #89b8ff !important; }
color: var(--text);
.skin-minerva .mw-parser-output table.wikitable,
border: 1px solid var(--border);
.skin-minerva .mw-parser-output .infobox,
.skin-minerva .mw-message-box,
.skin-minerva .navbox,
.skin-minerva .toc,
.skin-minerva .portal {
background-color: #141a21;
color: #e5e9f0;
border: 1px solid #243040;
}
}
hr { border-color: var(--border); }
.skin-minerva input[type="search"],
 
/* 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 .mw-ui-input,
.skin-minerva input[type="search"] {
.skin-minerva textarea,
background: var(--surface);
.skin-minerva select {
color: var(--text);
background-color: #141a21;
border: 1px solid var(--border);
color: #e5e9f0;
border: 1px solid #243040;
}
}
.skin-minerva input[type="search"]::placeholder { color: var(--muted); }
.skin-minerva ::placeholder { color: #a9b4c2; }
 
.skin-minerva .mw-parser-output img { border-radius: 8px; }
/* Images */
.skin-minerva.mw-page-is-mainpage .eld-hero {
.mw-parser-output img { border-radius: 8px; }
background: linear-gradient(180deg, rgba(126,177,255,0.08), rgba(126,177,255,0.03)), #141a21;
 
border: 1px solid #243040;
/* Main Page specific */
padding: 24px;
body.page-Main_Page .eld-hero {
border-radius: 12px;
background: linear-gradient(180deg, rgba(110,168,255,0.06), rgba(110,168,255,0.02)), var(--surface);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
border: 1px solid var(--border);
padding: 28px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
}
body.page-Main_Page .eld-hero__title {
.skin-minerva.mw-page-is-mainpage .eld-hero__title {
font-size: 2rem;
font-size: 2rem;
margin: 0 0 8px 0;
margin: 0 0 8px 0;
letter-spacing: 0.2px;
}
}
body.page-Main_Page .eld-hero__tagline {
.skin-minerva.mw-page-is-mainpage .eld-hero__tagline {
color: var(--muted);
color: #a9b4c2;
margin: 0 0 16px 0;
margin: 0 0 16px 0;
font-size: 1rem;
}
body.page-Main_Page .eld-hero__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
}
.eld-btn {
.skin-minerva .eld-btn {
display: inline-flex;
display: inline-flex;
align-items: center;
align-items: center;
Line 129: Line 83:
text-decoration: none;
text-decoration: none;
font-weight: 600;
font-weight: 600;
border: 1px solid var(--border);
border: 1px solid #243040;
background: var(--surface-2);
background: #1b232c;
color: var(--text);
color: #e5e9f0;
}
}
.eld-btn--primary {
.skin-minerva .eld-btn--primary {
background: linear-gradient(180deg, rgba(110,168,255,0.18), rgba(110,168,255,0.08));
background: linear-gradient(180deg, rgba(126,177,255,0.22), rgba(126,177,255,0.10));
border-color: #2a3a52;
border-color: #2a3a52;
}
}
.eld-btn:hover { filter: brightness(1.1); }
.skin-minerva .eld-btn:hover { filter: brightness(1.1); }
 
.skin-minerva.mw-page-is-mainpage .eld-section-title {
/* Grid/cards */
body.page-Main_Page .eld-section-title {
margin: 22px 0 10px 0;
margin: 22px 0 10px 0;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid #243040;
padding-bottom: 6px;
padding-bottom: 6px;
}
}
body.page-Main_Page .eld-grid {
.skin-minerva.mw-page-is-mainpage .eld-grid {
display: grid;
display: grid;
grid-template-columns: 1fr;
grid-template-columns: 1fr;
Line 152: Line 104:
}
}
@media (min-width: 650px) {
@media (min-width: 650px) {
body.page-Main_Page .eld-grid { grid-template-columns: repeat(2, 1fr); }
.skin-minerva.mw-page-is-mainpage .eld-grid { grid-template-columns: repeat(2, 1fr); }
}
}
@media (min-width: 1000px) {
@media (min-width: 1000px) {
body.page-Main_Page .eld-grid { grid-template-columns: repeat(3, 1fr); }
.skin-minerva.mw-page-is-mainpage .eld-grid { grid-template-columns: repeat(3, 1fr); }
}
}
.eld-card {
.skin-minerva .eld-card {
background: var(--surface);
background: #141a21;
border: 1px solid var(--border);
border: 1px solid #243040;
border-radius: var(--radius);
border-radius: 12px;
padding: 16px;
padding: 16px;
box-shadow: var(--shadow);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
}
.eld-card h3 { margin-top: 0; font-size: 1.1rem; }
.skin-minerva .eld-card h3 { margin-top: 0; font-size: 1.1rem; }
.eld-card p { color: var(--muted); margin-bottom: 10px; }
.skin-minerva .eld-card p { color: #a9b4c2; margin-bottom: 10px; }
.eld-card a { color: var(--link); }

Revision as of 00:56, 16 October 2025

.mw-body {
	position: relative;
	min-height: 100vh; /* full viewport height */
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
		url('/wiki/assets/bg.jpeg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
body.page-Main_Page #firstHeading {
    display: none;
}

.skin-minerva,
.skin-minerva body {
background-color: #0f1318 !important;
color: #e5e9f0 !important;
color-scheme: dark;
}
@media (min-width: 720px) {
.skin-minerva #mw-mf-page-center .content,
.skin-minerva .content,
.skin-minerva #content,
.skin-minerva .mw-body {
max-width: 960px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px;
padding-right: 16px;
}
}
.skin-minerva .mw-parser-output > p {
max-width: 75ch;
}
.skin-minerva .mw-parser-output a,
.skin-minerva a {
color: #7fb3ff !important;
}
.skin-minerva a:visited { color: #a5c4ff !important; }
.skin-minerva a:hover,
.skin-minerva a:focus { color: #89b8ff !important; }
.skin-minerva .mw-parser-output table.wikitable,
.skin-minerva .mw-parser-output .infobox,
.skin-minerva .mw-message-box,
.skin-minerva .navbox,
.skin-minerva .toc,
.skin-minerva .portal {
background-color: #141a21;
color: #e5e9f0;
border: 1px solid #243040;
}
.skin-minerva input[type="search"],
.skin-minerva .mw-ui-input,
.skin-minerva textarea,
.skin-minerva select {
background-color: #141a21;
color: #e5e9f0;
border: 1px solid #243040;
}
.skin-minerva ::placeholder { color: #a9b4c2; }
.skin-minerva .mw-parser-output img { border-radius: 8px; }
.skin-minerva.mw-page-is-mainpage .eld-hero {
background: linear-gradient(180deg, rgba(126,177,255,0.08), rgba(126,177,255,0.03)), #141a21;
border: 1px solid #243040;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.skin-minerva.mw-page-is-mainpage .eld-hero__title {
font-size: 2rem;
margin: 0 0 8px 0;
}
.skin-minerva.mw-page-is-mainpage .eld-hero__tagline {
color: #a9b4c2;
margin: 0 0 16px 0;
}
.skin-minerva .eld-btn {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
border: 1px solid #243040;
background: #1b232c;
color: #e5e9f0;
}
.skin-minerva .eld-btn--primary {
background: linear-gradient(180deg, rgba(126,177,255,0.22), rgba(126,177,255,0.10));
border-color: #2a3a52;
}
.skin-minerva .eld-btn:hover { filter: brightness(1.1); }
.skin-minerva.mw-page-is-mainpage .eld-section-title {
margin: 22px 0 10px 0;
border-bottom: 1px solid #243040;
padding-bottom: 6px;
}
.skin-minerva.mw-page-is-mainpage .eld-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 18px;
}
@media (min-width: 650px) {
.skin-minerva.mw-page-is-mainpage .eld-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.skin-minerva.mw-page-is-mainpage .eld-grid { grid-template-columns: repeat(3, 1fr); }
}
.skin-minerva .eld-card {
background: #141a21;
border: 1px solid #243040;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.skin-minerva .eld-card h3 { margin-top: 0; font-size: 1.1rem; }
.skin-minerva .eld-card p { color: #a9b4c2; margin-bottom: 10px; }