Jump to content

MediaWiki:Common.css

From Marspedia
Revision as of 01:49, 5 July 2026 by Jburk (talk | contribs) (Footer v3: widen Marspedia footer + embed Moon Society network footer (network-footer.css/js, Option B))

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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;
}
Retrieved from "https://marspedia.org/index.php?title=MediaWiki:Common.css&oldid=143021"