Jump to content

MediaWiki:Common.css: Difference between revisions

From Eldrasil Wiki
No edit summary
No edit summary
 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
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.
body {
position: relative;
min-height: 100vh;
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;
background-attachment: fixed;
}


CSS (Common.css)
body.page-Main_Page #firstHeading {
/* Eldrasil Wiki — Dark theme with subtle blue accent */
    display: none;
}


/* Tokens /
/* ===== MAIN PAGE ONLY STYLES ===== */
:root {
.mainpage-header {
--bg: #0f1318;
    background: linear-gradient(to bottom, rgba(39, 42, 53, 0.95), rgba(39, 42, 53, 0.7));
--surface: #141a21;
    border-bottom: 3px solid rgba(91, 155, 213, 0.3);
--surface-2: #1b232c;
    padding: 2rem 1rem;
--text: #e5e9f0;
    margin: 0 0 2rem 0;
--muted: #a9b4c2;
    text-align: center;
--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 */
.mainpage-header .thumb {
body.skin-minerva,
    display: inline-block;
body {
    margin: 0 0.5rem;
color-scheme: dark;
background: var(--bg);
color: var(--text);
}
}


/* Constrain width on desktop so content isn't too wide /
.mainpage-welcome-text {
@media (min-width: 768px) {
    background: rgba(39, 42, 53, 0.4);
body.skin-minerva #mw-mf-page-center .content,
    border-left: 4px solid rgba(91, 155, 213, 0.6);
body.skin-minerva #content,
    padding: 1.5rem;
body.skin-minerva .content,
    margin: 0 0 2rem 0;
body .mw-body {
    color: #b8bdc4;
max-width: 1100px; / adjust to taste: 960–1100px */
    font-size: clamp(0.9rem, 2vw, 1rem);
margin-left: auto !important;
    line-height: 1.7;
margin-right: auto !important;
padding-left: 16px;
padding-right: 16px;
}
}
.mainpage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}
}


/* Improve line length of top-level paragraphs */
.mainpage-card {
body.skin-minerva .mw-parser-output > p {
    background: rgba(39, 42, 53, 0.6);
max-width: 75ch;
    border: 1px solid rgba(91, 155, 213, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 40px;
}
}


/* Links */
.mainpage-card:hover {
.mw-parser-output a,
    background: rgba(45, 60, 85, 0.8);
a { color: var(--link); }
    border-color: rgba(91, 155, 213, 0.6);
a:visited { color: var(--link-visited); }
    box-shadow: 0 0 25px rgba(91, 155, 213, 0.3);
a:hover, a:focus { color: var(--blue-2); }
    transform: translateY(-3px);
}


/* Headings and common boxes */
.mainpage-card a {
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3 {
    text-decoration: none;
color: var(--text);
    color: inherit;
    display: block;
    width: 100%;
}
}
.mw-parser-output table.wikitable,
 
.mw-parser-output .infobox {
.mainpage-card h3 {
background: var(--surface);
    margin: 0 !important;
color: var(--text);
    color: #5b9bd5 !important;
border: 1px solid var(--border);
    font-size: 1.4rem !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}
}
hr { border-color: var(--border); }


/* Messages/TOC/navboxes on dark */
.mainpage-card p {
.mw-message-box, .ambox, .navbox, .portal, .toc, .mw-notification {
    color: #b8bdc4 !important;
background: var(--surface);
    font-size: 0.9rem !important;
border-color: var(--border);
    margin: 0 !important;
color: var(--text);
    line-height: 1.5 !important;
    display: block !important;
}
}


/* Search inputs (Minerva) */
.mainpage-footer {
.skin-minerva .search-box,
    background: rgba(39, 42, 53, 0.4);
.skin-minerva .mw-ui-input,
    border-top: 1px solid rgba(91, 155, 213, 0.15);
.skin-minerva input[type="search"] {
    padding: 1rem;
background: var(--surface);
    margin: 3rem 0 1rem 0;
color: var(--text);
    text-align: center;
border: 1px solid var(--border);
    color: #888;
    font-size: 0.85rem;
}
}
.skin-minerva input[type="search"]::placeholder { color: var(--muted); }


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


/* Main Page specific */
/* Medium screens (tablets, small laptops) */
body.page-Main_Page .eld-hero {
@media (max-width: 1024px) {
background: linear-gradient(180deg, rgba(110,168,255,0.06), rgba(110,168,255,0.02)), var(--surface);
    .mainpage-grid {
border: 1px solid var(--border);
        grid-template-columns: repeat(2, 1fr);
padding: 28px;
    }
border-radius: var(--radius);
box-shadow: var(--shadow);
}
}
body.page-Main_Page .eld-hero__title {
 
font-size: 2rem;
/* Small screens (phones) */
margin: 0 0 8px 0;
@media (max-width: 640px) {
letter-spacing: 0.2px;
    .mainpage-grid {
}
        grid-template-columns: 1fr;
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 */
/* ===== MAIN PAGE END ===== */
body.page-Main_Page .eld-section-title {
.mw-logo-container.skin-invert {
margin: 22px 0 10px 0;
    filter: none !important;
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); }

Latest revision as of 05:07, 24 October 2025

body {
	position: relative;
	min-height: 100vh;
	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;
	background-attachment: fixed;
}

body.page-Main_Page #firstHeading {
    display: none;
}

/* ===== MAIN PAGE ONLY STYLES ===== */
.mainpage-header {
    background: linear-gradient(to bottom, rgba(39, 42, 53, 0.95), rgba(39, 42, 53, 0.7));
    border-bottom: 3px solid rgba(91, 155, 213, 0.3);
    padding: 2rem 1rem;
    margin: 0 0 2rem 0;
    text-align: center;
}

.mainpage-header .thumb {
    display: inline-block;
    margin: 0 0.5rem;
}

.mainpage-welcome-text {
    background: rgba(39, 42, 53, 0.4);
    border-left: 4px solid rgba(91, 155, 213, 0.6);
    padding: 1.5rem;
    margin: 0 0 2rem 0;
    color: #b8bdc4;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.7;
}

.mainpage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.mainpage-card {
    background: rgba(39, 42, 53, 0.6);
    border: 1px solid rgba(91, 155, 213, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 40px;
}

.mainpage-card:hover {
    background: rgba(45, 60, 85, 0.8);
    border-color: rgba(91, 155, 213, 0.6);
    box-shadow: 0 0 25px rgba(91, 155, 213, 0.3);
    transform: translateY(-3px);
}

.mainpage-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.mainpage-card h3 {
    margin: 0 !important;
    color: #5b9bd5 !important;
    font-size: 1.4rem !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.mainpage-card p {
    color: #b8bdc4 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    display: block !important;
}

.mainpage-footer {
    background: rgba(39, 42, 53, 0.4);
    border-top: 1px solid rgba(91, 155, 213, 0.15);
    padding: 1rem;
    margin: 3rem 0 1rem 0;
    text-align: center;
    color: #888;
    font-size: 0.85rem;
}


/* Medium screens (tablets, small laptops) */
@media (max-width: 1024px) {
    .mainpage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens (phones) */
@media (max-width: 640px) {
    .mainpage-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== MAIN PAGE END ===== */
.mw-logo-container.skin-invert {
    filter: none !important;
}