MediaWiki:Common.css: Difference between revisions
Add custom three-column community footer (CSS) |
Footer v3: widen Marspedia footer + embed Moon Society network footer (network-footer.css/js, Option B) |
||
| Line 191: | Line 191: | ||
} | } | ||
/* ============================================================================= | |||
MARSPEDIA CUSTOM FOOTER (v3, 2026-07-03) — Marspedia-specific part | |||
Replaces the footer region of MediaWiki:Common.css (the old "network pillbox" | |||
block AND the old #mp-custom-footer block). The Moon Society network-footer.css | |||
is appended AFTER this (see the assembled Common.css.footer-block.css). | |||
Do NOT touch the ~6 KB of CSS above the footer region. | |||
Layout (top -> bottom): | |||
[ #mp-custom-footer — rust card, capped 1400px, centered, WIDER than v2 ] | |||
[ .ms-network-footer — Moon Society network band, appended to <body>, | |||
full window width, dark (its own CSS) ] | |||
============================================================================= */ | |||
/* | /* Hide the native MW footer (and the now-unused server-injected orange pillbox in it) */ | ||
#footer { | |||
display: none !important; | |||
} | } | ||
/* Guard: #mp-custom-footer below breaks out to full window width via 50vw margins; | |||
`clip` (not `hidden`, so Vector 2022's sticky header still works) absorbs any | |||
scrollbar-width overflow that the breakout could add. */ | |||
body { | |||
overflow-x: clip; | |||
} | } | ||
/* | /* Outer wrapper — full-bleed to the viewport so the Marspedia footer is WIDE */ | ||
#mp-custom-footer { | #mp-custom-footer { | ||
font-family: sans-serif; | font-family: sans-serif; | ||
background: #fff; | background: #fff; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
width: auto; | |||
margin-left: calc(50% - 50vw); | |||
margin-right: calc(50% - 50vw); | |||
padding: 0; | |||
} | } | ||
/* Rounded card */ | |||
/* Rounded rust card — capped and centered inside the full-width wrapper */ | |||
#mp-custom-footer .mp-footer-card { | #mp-custom-footer .mp-footer-card { | ||
background-color: #8c3a12; | background-color: #8c3a12; | ||
border-radius: 12px; | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
margin: 24px; | max-width: 1400px; | ||
margin: 24px auto; | |||
} | } | ||
/* ---- CTA bar ---- */ | /* ---- CTA bar ---- */ | ||
#mp-custom-footer .mp-footer-cta { | #mp-custom-footer .mp-footer-cta { | ||
| Line 376: | Line 276: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
/* ---- Dividers ---- */ | /* ---- Dividers ---- */ | ||
#mp-custom-footer .mp-footer-divider { | #mp-custom-footer .mp-footer-divider { | ||
| Line 382: | Line 283: | ||
margin: 0; | margin: 0; | ||
} | } | ||
/* ---- Three-column grid ---- */ | /* ---- Three-column grid ---- */ | ||
#mp-custom-footer .mp-footer-columns { | #mp-custom-footer .mp-footer-columns { | ||
| Line 397: | Line 299: | ||
#mp-custom-footer .mp-footer-col-mid { padding: 0 40px; } | #mp-custom-footer .mp-footer-col-mid { padding: 0 40px; } | ||
#mp-custom-footer .mp-footer-col-right { padding-left: 40px; } | #mp-custom-footer .mp-footer-col-right { padding-left: 40px; } | ||
/* Section labels | |||
/* Section labels */ | |||
#mp-custom-footer .mp-col-label { | #mp-custom-footer .mp-col-label { | ||
font-size: 0.75rem; | font-size: 0.75rem; | ||
| Line 406: | Line 309: | ||
margin: 0 0 4px 0; | margin: 0 0 4px 0; | ||
} | } | ||
#mp-custom-footer .mp-col-tagline { | #mp-custom-footer .mp-col-tagline { | ||
font-size: 0.75rem; | font-size: 0.75rem; | ||
| Line 413: | Line 315: | ||
margin: 0 0 20px 0; | margin: 0 0 20px 0; | ||
} | } | ||
#mp-custom-footer .mp-subhead { | #mp-custom-footer .mp-subhead { | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
| Line 420: | Line 321: | ||
margin: 0 0 2px 0; | margin: 0 0 2px 0; | ||
} | } | ||
#mp-custom-footer .mp-subhead-tagline { | #mp-custom-footer .mp-subhead-tagline { | ||
font-size: 0.75rem; | font-size: 0.75rem; | ||
| Line 427: | Line 327: | ||
margin: 0 0 10px 0; | margin: 0 0 10px 0; | ||
} | } | ||
#mp-custom-footer .mp-subsection + .mp-subsection { | #mp-custom-footer .mp-subsection + .mp-subsection { | ||
margin-top: 24px; | margin-top: 24px; | ||
} | } | ||
/* Links */ | /* Links */ | ||
#mp-custom-footer .mp-footer-links { | #mp-custom-footer .mp-footer-links { | ||
| Line 453: | Line 353: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
/* ---- Bottom strip ---- */ | |||
/* ---- Bottom strip (inside the card) ---- */ | |||
#mp-custom-footer .mp-footer-bottom { | #mp-custom-footer .mp-footer-bottom { | ||
border-top: 1px solid rgba(255, 255, 255, 0.1); | border-top: 1px solid rgba(255, 255, 255, 0.1); | ||
| Line 482: | Line 383: | ||
color: rgba(255, 255, 255, 0.6) !important; | color: rgba(255, 255, 255, 0.6) !important; | ||
text-decoration: none; | text-decoration: none; | ||
} | |||
/* ---- Responsive ---- */ | |||
@media ( max-width: 720px ) { | |||
#mp-custom-footer .mp-footer-cta { flex-direction: column; gap: 12px; padding: 24px; } | |||
#mp-custom-footer .mp-footer-cta-btn { margin-left: 0; } | |||
#mp-custom-footer .mp-footer-columns { grid-template-columns: 1fr; padding: 24px; } | |||
#mp-custom-footer .mp-footer-col + .mp-footer-col { | |||
border-left: none; | |||
border-top: 1px solid rgba(255, 255, 255, 0.1); | |||
margin-top: 24px; | |||
padding-top: 24px; | |||
} | |||
#mp-custom-footer .mp-footer-col-left, | |||
#mp-custom-footer .mp-footer-col-mid, | |||
#mp-custom-footer .mp-footer-col-right { padding-left: 0; padding-right: 0; } | |||
#mp-custom-footer .mp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } | |||
} | |||
/* ===================== BEGIN network-footer.css (Moon Society canonical, verbatim) ===================== */ | |||
/* ============================================================================= | |||
Moon Society network footer — .ms-network-footer | |||
Shared, self-contained footer for moonsociety.org / Lunarpedia / Spacepedia, | |||
and nested as a sub-element inside Marspedia's Mars footer. | |||
Portable + namespaced: every rule is scoped under .ms-network-footer, so it is | |||
safe to drop into any MediaWiki:Common.css or any site stylesheet. | |||
Commits to a dark celestial band on purpose, so it renders identically across | |||
every property regardless of that page's own light/dark theme. | |||
============================================================================= */ | |||
.ms-network-footer { | |||
--msf-ground-1: #0b1020; | |||
--msf-ground-2: #070a14; | |||
--msf-fg: #eef1fa; | |||
--msf-muted: #98a2bd; | |||
--msf-faint: #6b7594; | |||
--msf-line: rgba(255,255,255,.09); | |||
--msf-line-strong: rgba(255,255,255,.16); | |||
--msf-gold: #f0b542; | |||
--msf-gold-hi: #f8ca69; | |||
--msf-gold-ink: #201603; | |||
--msf-blue: #7db4e6; | |||
--msf-maxw: 1160px; | |||
all: revert; | |||
box-sizing: border-box; | |||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |||
font-size: 16px; line-height: 1.5; color: var(--msf-fg); | |||
background: | |||
radial-gradient(1100px 300px at 50% -20%, rgba(125,180,230,.13), transparent 60%), | |||
linear-gradient(180deg, var(--msf-ground-1), var(--msf-ground-2)); | |||
-webkit-font-smoothing: antialiased; | |||
/* an inline script moves this to the end of <body>, so its dark band spans the | |||
full window width. The native MediaWiki footer is hidden by that script. */ | |||
display: block; | |||
width: 100%; | |||
margin: 0; | |||
} | |||
/* Page-info strip: the relocated last-edited line + Privacy/About/Disclaimers, | |||
above the network band inside the same dark footer. Empty (hidden) until the | |||
script fills it, so no-JS users just keep the native footer. */ | |||
.ms-network-footer__pageinfo { | |||
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; | |||
padding-bottom: 14px; margin-bottom: 6px; | |||
border-bottom: 1px solid var(--msf-line); | |||
font-size: 12.5px; color: var(--msf-faint); | |||
} | |||
.ms-network-footer__pageinfo:empty { display: none; } | |||
.ms-network-footer__pageinfo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; } | |||
.ms-network-footer__pageinfo li { margin: 0; } | |||
.ms-network-footer__pageinfo a { color: var(--msf-muted); text-decoration: none; } | |||
.ms-network-footer__pageinfo a:hover { color: var(--msf-fg); } | |||
.ms-network-footer *, .ms-network-footer *::before, .ms-network-footer *::after { box-sizing: border-box; } | |||
/* full-bleed inner; the script sets padding-left/right to line up with the article column */ | |||
.ms-network-footer__inner { max-width: none; margin: 0; padding: 20px 26px 18px; } | |||
/* ---- property bar: three worlds fused into one slim bar ---- */ | |||
.ms-network-footer__bar { | |||
display: grid; grid-template-columns: repeat(3, 1fr); | |||
border-radius: 12px; overflow: hidden; | |||
border: 1px solid var(--msf-line-strong); | |||
box-shadow: 0 8px 24px rgba(0,0,0,.34); | |||
} | |||
.msf-seg { | |||
position: relative; z-index: 0; | |||
display: flex; align-items: center; gap: 10px; | |||
padding: 12px 16px; min-width: 0; | |||
text-decoration: none; color: #fff; isolation: isolate; | |||
transition: filter .16s ease; | |||
} | |||
.msf-seg + .msf-seg { box-shadow: inset 1px 0 0 rgba(0,0,0,.4), inset 2px 0 0 rgba(255,255,255,.05); } | |||
.msf-seg::before { content: ""; position: absolute; inset: 0; z-index: -2; } /* texture */ | |||
.msf-seg::after { content: ""; position: absolute; inset: 0; z-index: -1; | |||
background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)); } | |||
/* hover/focus: a gold border around the whole third + gold text, no underline */ | |||
.msf-seg:hover, .msf-seg:focus-visible { | |||
outline: none; | |||
text-decoration: none; | |||
filter: brightness(1.05); | |||
box-shadow: inset 0 0 0 2px var(--msf-gold); | |||
} | |||
.msf-seg:hover .msf-seg__name, .msf-seg:focus-visible .msf-seg__name, | |||
.msf-seg:hover .msf-seg__tag, .msf-seg:focus-visible .msf-seg__tag, | |||
.msf-seg:hover .msf-seg__arrow, .msf-seg:focus-visible .msf-seg__arrow { color: var(--msf-gold-hi); } | |||
.msf-seg__icon { width: 22px; height: 22px; flex: none; } | |||
/* colour set directly on the spans so they never inherit the host wiki's link blue */ | |||
.msf-seg__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: #fff; } | |||
.msf-seg__name b { font-weight: 400; opacity: .6; } | |||
.msf-seg__tag { | |||
font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap; | |||
overflow: hidden; text-overflow: ellipsis; min-width: 0; | |||
} | |||
.msf-seg__tag::before { content: "\00b7 "; opacity: .6; } | |||
.msf-seg__arrow { margin-left: auto; font-size: 14px; opacity: .45; flex: none; color: #fff; | |||
transition: transform .16s ease, opacity .16s ease; } | |||
.msf-seg:hover .msf-seg__arrow, .msf-seg:focus-visible .msf-seg__arrow { opacity: .95; transform: translateX(3px); } | |||
.msf-seg__here { | |||
display: none; margin-left: auto; flex: none; | |||
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; | |||
padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; | |||
transition: background .16s ease, color .16s ease; | |||
} | |||
/* Lunarpedia — lunar regolith, cool silver-grey */ | |||
.msf-seg--luna::before { | |||
background: | |||
radial-gradient(circle at 82% 34%, rgba(255,255,255,.16) 0 4px, transparent 5px), | |||
radial-gradient(circle at 24% 66%, rgba(0,0,0,.26) 0 6px, transparent 7px), | |||
radial-gradient(circle at 55% 78%, rgba(255,255,255,.08) 0 3px, transparent 4px), | |||
linear-gradient(158deg, #4a5162 0%, #2b303d 100%); | |||
} | |||
.msf-seg--luna .msf-seg__icon { color: #dbe2f0; } | |||
/* Spacepedia — cosmic indigo starfield */ | |||
.msf-seg--space::before { | |||
background: | |||
radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 2px), | |||
radial-gradient(circle at 64% 22%, rgba(255,255,255,.9) 0 1px, transparent 2px), | |||
radial-gradient(circle at 86% 62%, #fff 0 1.2px, transparent 2px), | |||
radial-gradient(circle at 44% 74%, rgba(255,255,255,.7) 0 1px, transparent 2px), | |||
radial-gradient(130% 130% at 88% 0%, rgba(150,120,255,.34), transparent 55%), | |||
linear-gradient(160deg, #251a57 0%, #0c0926 100%); | |||
} | |||
.msf-seg--space .msf-seg__icon { color: #b8abff; } | |||
/* Marspedia — rust dust */ | |||
.msf-seg--mars::before { | |||
background: | |||
radial-gradient(circle at 72% 30%, rgba(255,190,140,.22) 0 2px, transparent 4px), | |||
repeating-linear-gradient(122deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px), | |||
linear-gradient(158deg, #9a3a1b 0%, #571d0e 100%); | |||
} | |||
.msf-seg--mars .msf-seg__icon { color: #ffb583; } | |||
/* current property: marked "you are here" — hoverable (to brighten the badge) but | |||
not a gold navigation target. */ | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars { cursor: default; } | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna .msf-seg__arrow, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space .msf-seg__arrow, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars .msf-seg__arrow { display: none; } | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna .msf-seg__here, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space .msf-seg__here, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars .msf-seg__here { display: inline-block; } | |||
/* hovering the current tile: no gold border/text — brighten the "You are here" badge */ | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover, | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:focus-visible, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:focus-visible, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:focus-visible { box-shadow: none; filter: brightness(1.03); } | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__name, | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__tag, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__name, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__tag, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__name, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__tag { color: #fff; } | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__here, | |||
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:focus-visible .msf-seg__here, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__here, | |||
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:focus-visible .msf-seg__here, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__here, | |||
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:focus-visible .msf-seg__here { background: var(--msf-gold); color: var(--msf-gold-ink); } | |||
/* ---- Moon Society row: mission + CTAs on one compact line ---- */ | |||
.ms-network-footer__society { | |||
margin-top: 16px; | |||
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; | |||
} | |||
.msf-org { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 340px; } | |||
.msf-org__moon { width: 30px; height: 30px; flex: none; color: #eaeefb; } | |||
.msf-org__name { font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1px; } | |||
.msf-org__mission { | |||
font-family: Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif; | |||
font-size: 13.5px; line-height: 1.4; margin: 0; color: var(--msf-muted); max-width: 52ch; | |||
} | |||
.msf-org__mission em { color: var(--msf-fg); font-style: italic; } | |||
.msf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } | |||
.msf-btn { | |||
display: inline-flex; align-items: center; gap: 6px; | |||
font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; | |||
padding: 8px 14px; border-radius: 9px; | |||
transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease; | |||
} | |||
.msf-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--msf-ground-2), 0 0 0 4px var(--msf-blue); } | |||
.msf-btn--primary { background: var(--msf-gold); color: var(--msf-gold-ink); } | |||
.msf-btn--primary:hover { background: var(--msf-gold-hi); transform: translateY(-1px); } | |||
.msf-btn--outline { border: 1px solid var(--msf-line-strong); color: var(--msf-fg); } | |||
.msf-btn--outline:hover { border-color: var(--msf-gold); color: var(--msf-gold-hi); transform: translateY(-1px); } | |||
.msf-btn--ghost { color: var(--msf-fg); padding-left: 4px; padding-right: 4px; } | |||
.msf-btn--ghost:hover { color: var(--msf-blue); } | |||
/* ---- legal / social row ---- */ | |||
.ms-network-footer__meta { | |||
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--msf-line); | |||
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; | |||
font-size: 12px; color: var(--msf-faint); | |||
} | |||
.ms-network-footer__meta a { color: var(--msf-muted); text-decoration: none; } | |||
.ms-network-footer__meta a:hover { color: var(--msf-fg); } | |||
.msf-meta__spring { flex: 1 1 auto; } | |||
.msf-social { display: flex; gap: 5px; } | |||
.msf-social a { | |||
display: inline-flex; align-items: center; justify-content: center; | |||
width: 30px; height: 30px; border-radius: 8px; color: var(--msf-muted); | |||
border: 1px solid var(--msf-line); | |||
transition: color .14s ease, border-color .14s ease, background .14s ease; | |||
} | |||
.msf-social a:hover { color: #fff; border-color: var(--msf-line-strong); background: rgba(255,255,255,.05); } | |||
.msf-social svg { width: 15px; height: 15px; } | |||
@media (max-width: 720px) { | |||
.ms-network-footer__bar { grid-template-columns: 1fr; } | |||
.msf-seg + .msf-seg { box-shadow: inset 0 1px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.05); } | |||
.msf-org { flex-basis: 100%; } | |||
} | |||
@media (prefers-reduced-motion: reduce) { .ms-network-footer * { transition: none !important; } } | |||
/* ====================== END network-footer.css (Moon Society canonical, verbatim) ====================== */ | |||
/* ============================================================================= | |||
MARSPEDIA-ONLY tweak to the Moon Society network footer (appended AFTER | |||
network-footer.css). The shared component's inner is `max-width:none` and the | |||
EXTENSION's server-side script pads it to line up with the article column. | |||
Marspedia embeds via Common.js (no extension), so that script does not run — | |||
instead we cap + center the inner content at 1400px so it lines up with the | |||
Marspedia rust card above. The dark band itself stays FULL window width. | |||
Remove this block if Marspedia ever switches to the NetworkFooter extension. | |||
============================================================================= */ | |||
.ms-network-footer .ms-network-footer__inner { | |||
max-width: 1400px; | |||
margin: 0 auto; | |||
} | } | ||
Revision as of 01:49, 5 July 2026
/* CSS placed here will be applied to all skins */
/* Begin James Gholston Test CSS */
/* @import "https://marspedia.org/MediaWiki:Exoproject.css&action=raw&ctype=text/css"; */
#wazootoo
/* Testing $wgUseSiteCss */
{
color: #FF007F;
background: #00FFFF
}
/* End James Gholston Test CSS */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif")
body {font-family: "Noto Sans", sans-serif}
/* changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text) */
div#content h1, div#content h2 {font-family: "Noto Serif", serif}
/* changes the default font used for MediaWiki headings to Noto Serif */
/* Shrink images when on mobile (needs improvement) */
img {
max-width: 100%;
height:auto;
}
/* Main Page CSS from Mediawiki.org */
.mainpage_heybox {
border:3px solid #9B301C;
background:#F97242;
padding:0.225em;
text-align:center;
}
.mainpage_heybox a {
color:#FFF;
}
.mainpage_topbox {
background: #f9f9f9;
margin: 1em 0;
}
.mainpage_layouttable {
border: 0;
margin: 0;
width: 100%;
border-spacing: 10px;
}
.mainpage_layouttable * > tr > td {
vertical-align: top;
}
.mainpage_boxtitle {
font-size: 105%;
padding: 0.4em;
background-color: #eeeeee;
font-weight: bold;
min-height: 2em;
vertical-align: middle;
}
.mainpage_hubbox mainpage_featuredcell {
padding-left:5px;
img {
padding-left:0;
}
}
.mainpage_pagetitle {
color: #cf7606;
font-size: 200%;
padding: 0.2em 0.4em;
}
.mainpage_sitelinks {
padding: 0.2em;
text-align: center;
background-color: white;
font-weight: bold;
}
.mainpage_hubtitle {
text-align: center;
}
.mainpage_boxcontents {
background: #ffffff;
padding: 0.2em 0.4em;
}
.mainpage_boxcontents_small {
font-size: 95%;
}
.mainpage_boxcontents_title {
display: block;
border-bottom: 1px solid #AAA;
margin-bottom: 0.5em;
text-align: center;
font-weight: bold;
font-size: larger;
}
.mainpage_middleblock .mainpage_hubbox {
width: 50%;
}
.mainpage_hubbox, .mainpage_topbox {
padding: 0;
border: 1px solid #aaaaaa;
}
.mainpage_mwtitle {
color: #9b301c;
}
.mainpage_languages {
margin: 0.5em 10px;
}
.mainpage_row2,
.mainpage_row3 {
/*display: -webkit-box;*/
/*display: -moz-box;*/
/*display: -ms-flexbox;*/
/*display: -webkit-flex;*/
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 1em 0;
}
@media screen and (min-width: 45em) {
.mainpage_row2 .mainpage_hubbox {
box-sizing: border-box;
float: left;
width:50%;
}
.mainpage_row2 .mainpage_featuredcell {
flex:1 0;
margin-right:5px;
}
.mainpage_row2 .mainpage_helpcell {
flex:1 0;
margin-left:5px;
}
}
@media screen and (max-width: 45em) {
.mainpage_row2 .mainpage_hubbox {
box-sizing: border-box;
flex: 1 0 100%;
width: 100%;
margin: 0.5em 0;
}
}
@media screen and (min-width: 45em) {
.mainpage_row3 .mainpage_hubbox {
box-sizing: border-box;
float: left;
}
.mainpage_row3 .mainpage_newscell {
flex: 2 0 20em;
margin-right:5px;
}
.mainpage_row3 .mainpage_aboutcell {
flex: 1 2 15em;
margin-left:5px;
}
}
@media screen and (max-width: 45em) {
.mainpage_row3 .mainpage_hubbox {
box-sizing: border-box;
flex: 1 0 100%;
width: 100%;
margin: 0.5em 0;
}
}
@media screen and (max-width: 55em) {
.mainpage_row3 .mainpage_newscell {
order: -1;
flex: 1 0 100%;
width: 100%;
margin: 0 0 0.5em 0;
}
}
/* =============================================================================
MARSPEDIA CUSTOM FOOTER (v3, 2026-07-03) — Marspedia-specific part
Replaces the footer region of MediaWiki:Common.css (the old "network pillbox"
block AND the old #mp-custom-footer block). The Moon Society network-footer.css
is appended AFTER this (see the assembled Common.css.footer-block.css).
Do NOT touch the ~6 KB of CSS above the footer region.
Layout (top -> bottom):
[ #mp-custom-footer — rust card, capped 1400px, centered, WIDER than v2 ]
[ .ms-network-footer — Moon Society network band, appended to <body>,
full window width, dark (its own CSS) ]
============================================================================= */
/* Hide the native MW footer (and the now-unused server-injected orange pillbox in it) */
#footer {
display: none !important;
}
/* Guard: #mp-custom-footer below breaks out to full window width via 50vw margins;
`clip` (not `hidden`, so Vector 2022's sticky header still works) absorbs any
scrollbar-width overflow that the breakout could add. */
body {
overflow-x: clip;
}
/* Outer wrapper — full-bleed to the viewport so the Marspedia footer is WIDE */
#mp-custom-footer {
font-family: sans-serif;
background: #fff;
box-sizing: border-box;
width: auto;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0;
}
/* Rounded rust card — capped and centered inside the full-width wrapper */
#mp-custom-footer .mp-footer-card {
background-color: #8c3a12;
border-radius: 12px;
overflow: hidden;
max-width: 1400px;
margin: 24px auto;
}
/* ---- CTA bar ---- */
#mp-custom-footer .mp-footer-cta {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 32px 48px 28px;
}
#mp-custom-footer .mp-footer-cta-text h2 {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.025em;
color: #ffffff;
margin: 0 0 4px 0;
padding: 0;
border: none;
}
#mp-custom-footer .mp-footer-cta-text p {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.625;
margin: 0;
}
#mp-custom-footer .mp-footer-cta-btn {
flex-shrink: 0;
margin-left: 32px;
margin-top: 2px;
background: rgba(255, 255, 255, 0.15);
color: #ffffff !important;
border-radius: 6px;
padding: 8px 16px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s;
}
#mp-custom-footer .mp-footer-cta-btn:hover {
background: rgba(255, 255, 255, 0.25);
text-decoration: none;
}
/* ---- Dividers ---- */
#mp-custom-footer .mp-footer-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin: 0;
}
/* ---- Three-column grid ---- */
#mp-custom-footer .mp-footer-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 28px 48px 32px;
}
#mp-custom-footer .mp-footer-col {
box-sizing: border-box;
}
#mp-custom-footer .mp-footer-col + .mp-footer-col {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
#mp-custom-footer .mp-footer-col-left { padding-right: 40px; }
#mp-custom-footer .mp-footer-col-mid { padding: 0 40px; }
#mp-custom-footer .mp-footer-col-right { padding-left: 40px; }
/* Section labels */
#mp-custom-footer .mp-col-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 4px 0;
}
#mp-custom-footer .mp-col-tagline {
font-size: 0.75rem;
font-style: italic;
color: rgba(255, 255, 255, 0.4);
margin: 0 0 20px 0;
}
#mp-custom-footer .mp-subhead {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 2px 0;
}
#mp-custom-footer .mp-subhead-tagline {
font-size: 0.75rem;
font-style: italic;
color: rgba(255, 255, 255, 0.4);
margin: 0 0 10px 0;
}
#mp-custom-footer .mp-subsection + .mp-subsection {
margin-top: 24px;
}
/* Links */
#mp-custom-footer .mp-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
#mp-custom-footer .mp-footer-links li {
margin-bottom: 8px;
}
#mp-custom-footer .mp-footer-links li:last-child {
margin-bottom: 0;
}
#mp-custom-footer .mp-footer-links a {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6) !important;
text-decoration: none;
transition: color 0.15s;
}
#mp-custom-footer .mp-footer-links a:hover {
color: #ffffff !important;
text-decoration: none;
}
/* ---- Bottom strip (inside the card) ---- */
#mp-custom-footer .mp-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 12px 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
#mp-custom-footer .mp-footer-bottom-timestamp {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
margin: 0;
}
#mp-custom-footer .mp-footer-bottom-links {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
#mp-custom-footer .mp-footer-bottom-links a {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3) !important;
text-decoration: none;
transition: color 0.15s;
}
#mp-custom-footer .mp-footer-bottom-links a:hover {
color: rgba(255, 255, 255, 0.6) !important;
text-decoration: none;
}
/* ---- Responsive ---- */
@media ( max-width: 720px ) {
#mp-custom-footer .mp-footer-cta { flex-direction: column; gap: 12px; padding: 24px; }
#mp-custom-footer .mp-footer-cta-btn { margin-left: 0; }
#mp-custom-footer .mp-footer-columns { grid-template-columns: 1fr; padding: 24px; }
#mp-custom-footer .mp-footer-col + .mp-footer-col {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 24px;
padding-top: 24px;
}
#mp-custom-footer .mp-footer-col-left,
#mp-custom-footer .mp-footer-col-mid,
#mp-custom-footer .mp-footer-col-right { padding-left: 0; padding-right: 0; }
#mp-custom-footer .mp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ===================== BEGIN network-footer.css (Moon Society canonical, verbatim) ===================== */
/* =============================================================================
Moon Society network footer — .ms-network-footer
Shared, self-contained footer for moonsociety.org / Lunarpedia / Spacepedia,
and nested as a sub-element inside Marspedia's Mars footer.
Portable + namespaced: every rule is scoped under .ms-network-footer, so it is
safe to drop into any MediaWiki:Common.css or any site stylesheet.
Commits to a dark celestial band on purpose, so it renders identically across
every property regardless of that page's own light/dark theme.
============================================================================= */
.ms-network-footer {
--msf-ground-1: #0b1020;
--msf-ground-2: #070a14;
--msf-fg: #eef1fa;
--msf-muted: #98a2bd;
--msf-faint: #6b7594;
--msf-line: rgba(255,255,255,.09);
--msf-line-strong: rgba(255,255,255,.16);
--msf-gold: #f0b542;
--msf-gold-hi: #f8ca69;
--msf-gold-ink: #201603;
--msf-blue: #7db4e6;
--msf-maxw: 1160px;
all: revert;
box-sizing: border-box;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px; line-height: 1.5; color: var(--msf-fg);
background:
radial-gradient(1100px 300px at 50% -20%, rgba(125,180,230,.13), transparent 60%),
linear-gradient(180deg, var(--msf-ground-1), var(--msf-ground-2));
-webkit-font-smoothing: antialiased;
/* an inline script moves this to the end of <body>, so its dark band spans the
full window width. The native MediaWiki footer is hidden by that script. */
display: block;
width: 100%;
margin: 0;
}
/* Page-info strip: the relocated last-edited line + Privacy/About/Disclaimers,
above the network band inside the same dark footer. Empty (hidden) until the
script fills it, so no-JS users just keep the native footer. */
.ms-network-footer__pageinfo {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
padding-bottom: 14px; margin-bottom: 6px;
border-bottom: 1px solid var(--msf-line);
font-size: 12.5px; color: var(--msf-faint);
}
.ms-network-footer__pageinfo:empty { display: none; }
.ms-network-footer__pageinfo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ms-network-footer__pageinfo li { margin: 0; }
.ms-network-footer__pageinfo a { color: var(--msf-muted); text-decoration: none; }
.ms-network-footer__pageinfo a:hover { color: var(--msf-fg); }
.ms-network-footer *, .ms-network-footer *::before, .ms-network-footer *::after { box-sizing: border-box; }
/* full-bleed inner; the script sets padding-left/right to line up with the article column */
.ms-network-footer__inner { max-width: none; margin: 0; padding: 20px 26px 18px; }
/* ---- property bar: three worlds fused into one slim bar ---- */
.ms-network-footer__bar {
display: grid; grid-template-columns: repeat(3, 1fr);
border-radius: 12px; overflow: hidden;
border: 1px solid var(--msf-line-strong);
box-shadow: 0 8px 24px rgba(0,0,0,.34);
}
.msf-seg {
position: relative; z-index: 0;
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; min-width: 0;
text-decoration: none; color: #fff; isolation: isolate;
transition: filter .16s ease;
}
.msf-seg + .msf-seg { box-shadow: inset 1px 0 0 rgba(0,0,0,.4), inset 2px 0 0 rgba(255,255,255,.05); }
.msf-seg::before { content: ""; position: absolute; inset: 0; z-index: -2; } /* texture */
.msf-seg::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)); }
/* hover/focus: a gold border around the whole third + gold text, no underline */
.msf-seg:hover, .msf-seg:focus-visible {
outline: none;
text-decoration: none;
filter: brightness(1.05);
box-shadow: inset 0 0 0 2px var(--msf-gold);
}
.msf-seg:hover .msf-seg__name, .msf-seg:focus-visible .msf-seg__name,
.msf-seg:hover .msf-seg__tag, .msf-seg:focus-visible .msf-seg__tag,
.msf-seg:hover .msf-seg__arrow, .msf-seg:focus-visible .msf-seg__arrow { color: var(--msf-gold-hi); }
.msf-seg__icon { width: 22px; height: 22px; flex: none; }
/* colour set directly on the spans so they never inherit the host wiki's link blue */
.msf-seg__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: #fff; }
.msf-seg__name b { font-weight: 400; opacity: .6; }
.msf-seg__tag {
font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msf-seg__tag::before { content: "\00b7 "; opacity: .6; }
.msf-seg__arrow { margin-left: auto; font-size: 14px; opacity: .45; flex: none; color: #fff;
transition: transform .16s ease, opacity .16s ease; }
.msf-seg:hover .msf-seg__arrow, .msf-seg:focus-visible .msf-seg__arrow { opacity: .95; transform: translateX(3px); }
.msf-seg__here {
display: none; margin-left: auto; flex: none;
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff;
transition: background .16s ease, color .16s ease;
}
/* Lunarpedia — lunar regolith, cool silver-grey */
.msf-seg--luna::before {
background:
radial-gradient(circle at 82% 34%, rgba(255,255,255,.16) 0 4px, transparent 5px),
radial-gradient(circle at 24% 66%, rgba(0,0,0,.26) 0 6px, transparent 7px),
radial-gradient(circle at 55% 78%, rgba(255,255,255,.08) 0 3px, transparent 4px),
linear-gradient(158deg, #4a5162 0%, #2b303d 100%);
}
.msf-seg--luna .msf-seg__icon { color: #dbe2f0; }
/* Spacepedia — cosmic indigo starfield */
.msf-seg--space::before {
background:
radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 2px),
radial-gradient(circle at 64% 22%, rgba(255,255,255,.9) 0 1px, transparent 2px),
radial-gradient(circle at 86% 62%, #fff 0 1.2px, transparent 2px),
radial-gradient(circle at 44% 74%, rgba(255,255,255,.7) 0 1px, transparent 2px),
radial-gradient(130% 130% at 88% 0%, rgba(150,120,255,.34), transparent 55%),
linear-gradient(160deg, #251a57 0%, #0c0926 100%);
}
.msf-seg--space .msf-seg__icon { color: #b8abff; }
/* Marspedia — rust dust */
.msf-seg--mars::before {
background:
radial-gradient(circle at 72% 30%, rgba(255,190,140,.22) 0 2px, transparent 4px),
repeating-linear-gradient(122deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px),
linear-gradient(158deg, #9a3a1b 0%, #571d0e 100%);
}
.msf-seg--mars .msf-seg__icon { color: #ffb583; }
/* current property: marked "you are here" — hoverable (to brighten the badge) but
not a gold navigation target. */
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars { cursor: default; }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna .msf-seg__arrow,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space .msf-seg__arrow,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars .msf-seg__arrow { display: none; }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna .msf-seg__here,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space .msf-seg__here,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars .msf-seg__here { display: inline-block; }
/* hovering the current tile: no gold border/text — brighten the "You are here" badge */
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover,
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:focus-visible,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:focus-visible,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:focus-visible { box-shadow: none; filter: brightness(1.03); }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__name,
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__tag,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__name,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__tag,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__name,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__tag { color: #fff; }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__here,
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:focus-visible .msf-seg__here,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__here,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:focus-visible .msf-seg__here,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__here,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:focus-visible .msf-seg__here { background: var(--msf-gold); color: var(--msf-gold-ink); }
/* ---- Moon Society row: mission + CTAs on one compact line ---- */
.ms-network-footer__society {
margin-top: 16px;
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.msf-org { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 340px; }
.msf-org__moon { width: 30px; height: 30px; flex: none; color: #eaeefb; }
.msf-org__name { font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1px; }
.msf-org__mission {
font-family: Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif;
font-size: 13.5px; line-height: 1.4; margin: 0; color: var(--msf-muted); max-width: 52ch;
}
.msf-org__mission em { color: var(--msf-fg); font-style: italic; }
.msf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msf-btn {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
padding: 8px 14px; border-radius: 9px;
transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.msf-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--msf-ground-2), 0 0 0 4px var(--msf-blue); }
.msf-btn--primary { background: var(--msf-gold); color: var(--msf-gold-ink); }
.msf-btn--primary:hover { background: var(--msf-gold-hi); transform: translateY(-1px); }
.msf-btn--outline { border: 1px solid var(--msf-line-strong); color: var(--msf-fg); }
.msf-btn--outline:hover { border-color: var(--msf-gold); color: var(--msf-gold-hi); transform: translateY(-1px); }
.msf-btn--ghost { color: var(--msf-fg); padding-left: 4px; padding-right: 4px; }
.msf-btn--ghost:hover { color: var(--msf-blue); }
/* ---- legal / social row ---- */
.ms-network-footer__meta {
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--msf-line);
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
font-size: 12px; color: var(--msf-faint);
}
.ms-network-footer__meta a { color: var(--msf-muted); text-decoration: none; }
.ms-network-footer__meta a:hover { color: var(--msf-fg); }
.msf-meta__spring { flex: 1 1 auto; }
.msf-social { display: flex; gap: 5px; }
.msf-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px; color: var(--msf-muted);
border: 1px solid var(--msf-line);
transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.msf-social a:hover { color: #fff; border-color: var(--msf-line-strong); background: rgba(255,255,255,.05); }
.msf-social svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
.ms-network-footer__bar { grid-template-columns: 1fr; }
.msf-seg + .msf-seg { box-shadow: inset 0 1px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.05); }
.msf-org { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ms-network-footer * { transition: none !important; } }
/* ====================== END network-footer.css (Moon Society canonical, verbatim) ====================== */
/* =============================================================================
MARSPEDIA-ONLY tweak to the Moon Society network footer (appended AFTER
network-footer.css). The shared component's inner is `max-width:none` and the
EXTENSION's server-side script pads it to line up with the article column.
Marspedia embeds via Common.js (no extension), so that script does not run —
instead we cap + center the inner content at 1400px so it lines up with the
Marspedia rust card above. The dark band itself stays FULL window width.
Remove this block if Marspedia ever switches to the NetworkFooter extension.
============================================================================= */
.ms-network-footer .ms-network-footer__inner {
max-width: 1400px;
margin: 0 auto;
}