MediaWiki:Common.css: Difference between revisions

Revision as of 05:04, 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 SITE-INFO FOOTER  (v5 "concept", 2026-07-05)
   Dark chocolate brand-led footer (replaces the rust card). Sits above the Moon
   Society network band. Replaces the footer region of MediaWiki:Common.css (from
   the old pillbox comment to end); network-footer.css is appended after this.
   Layout (top -> bottom): [ #mp-custom-footer dark brand+columns, capped 1400 ]
                           [ .ms-network-footer band, full window width ]
   ============================================================================= */

/* Hide the native MW footer (and the old server-injected pillbox that lived in it) */
#footer { display: none !important; }

/* Guard for the full-bleed wrapper below (clip, not hidden, keeps Vector sticky header) */
body { overflow-x: clip; }

/* Full-bleed wrapper — dark chocolate band spanning the window width */
#mp-custom-footer {
  box-sizing: border-box;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #2b1710;
  color: #e9b491;
  font-family: sans-serif;
}
#mp-custom-footer a { text-decoration: none; }

/* Centered content grid: wide brand column + three link columns */
#mp-custom-footer .mp-si-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 40px 34px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

/* ---- Brand column ---- */
#mp-custom-footer .mp-si-wordmark {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #e07b4a;
  margin: 0 0 14px 0;
  padding: 0;
  border: none;
}
#mp-custom-footer .mp-si-tagline {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #d8b6a1;
  margin: 0 0 20px 0;
  max-width: 34ch;
}
#mp-custom-footer .mp-si-cta {
  display: inline-block;
  color: #e07b4a !important;
  font-weight: 600;
  font-size: 0.875rem;
  transition: color 0.15s;
}
#mp-custom-footer .mp-si-cta:hover { color: #ee8d5b !important; }

/* ---- Site search ---- */
#mp-custom-footer .mp-footer-search {
  display: flex;
  gap: 8px;
  margin: 0 0 16px 0;
  max-width: 340px;
}
#mp-custom-footer .mp-footer-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(233, 180, 145, 0.28);
  border-radius: 6px;
  padding: 8px 11px;
  color: #ffffff;
  font-size: 0.8125rem;
}
#mp-custom-footer .mp-footer-search-input::placeholder { color: rgba(233, 180, 145, 0.6); }
#mp-custom-footer .mp-footer-search-input:focus {
  outline: none;
  border-color: #e07b4a;
  background: rgba(255, 255, 255, 0.10);
}
#mp-custom-footer .mp-footer-search-btn {
  flex: none;
  background: #e07b4a;
  color: #2b1710 !important;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
#mp-custom-footer .mp-footer-search-btn:hover { background: #ee8d5b; }

/* ---- Link columns ---- */
#mp-custom-footer .mp-si-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e07b4a;
  margin: 4px 0 16px 0;
}
#mp-custom-footer .mp-si-links { list-style: none; margin: 0; padding: 0; }
#mp-custom-footer .mp-si-links li { margin-bottom: 12px; }
#mp-custom-footer .mp-si-links li:last-child { margin-bottom: 0; }
#mp-custom-footer .mp-si-links a {
  color: #e9b491;
  font-size: 0.9375rem;
  transition: color 0.15s;
}
#mp-custom-footer .mp-si-links a:hover { color: #ffffff; }

/* ---- Bottom strip ---- */
#mp-custom-footer .mp-si-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  border-top: 1px solid rgba(233, 180, 145, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
}
#mp-custom-footer .mp-si-bottom-timestamp { font-size: 0.75rem; color: rgba(233, 180, 145, 0.5); margin: 0; }
#mp-custom-footer .mp-si-bottom-links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
#mp-custom-footer .mp-si-bottom-links a { font-size: 0.75rem; color: rgba(233, 180, 145, 0.5); transition: color 0.15s; }
#mp-custom-footer .mp-si-bottom-links a:hover { color: #e9b491; }

/* ---- Responsive ---- */
@media ( max-width: 900px ) {
  #mp-custom-footer .mp-si-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  #mp-custom-footer .mp-si-brand { grid-column: 1 / -1; }
}
@media ( max-width: 560px ) {
  #mp-custom-footer .mp-si-inner { grid-template-columns: 1fr; padding: 32px 24px 24px; }
  #mp-custom-footer .mp-si-bottom { flex-direction: column; align-items: flex-start; padding: 16px 24px; }
}


/* ===================== 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). We embed via Common.js (no extension), so the extension's
   column-align JS does not run — cap + center the band's inner content at 1400px
   so it lines up with the site-info footer above. Band stays full window width.
   ============================================================================= */
.ms-network-footer .ms-network-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
}