MediaWiki:Common.css: Difference between revisions

Revision as of 14:49, 15 November 2025

/* ================================
   Sun Keeperverse — Common.css
   Mobile-first, Encarta-style
   ================================ */

/* ---------- Root & palette ---------- */
:root {
  color-scheme: light !important;
  --color-base: #2b2414 !important;
  --color-link: #36c !important;
  --color-link-new: #d33 !important;

  --card-bg: #efe3c1;
  --card-border: #c9b172;
}

/* ---------- Canvas & basic layout ---------- */

html,
body {
  background: #ffffff !important;
  color: var(--color-base) !important;
  margin: 0;
  padding: 0;
}

/* Main containers */
.vector-page,
.mw-page-container,
.mw-body,
.mw-content-container {
  background: transparent

/* ====================================
   MOBILE OVERRIDES – LAYOUT + TYPO
   ==================================== */

/* 1. saner font sizes on small screens */
@media (max-width: 1100px) {
  body,
  .mw-body-content,
  .vector-body,
  .mw-content-ltr,
  .mw-parser-output {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 720px) {
  body,
  .mw-body-content,
  .vector-body,
  .mw-content-ltr,
  .mw-parser-output {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* 2. main content: full-width, no weird gutters */
@media (max-width: 1100px) {
  .mw-body-content,
  .vector-body {
    box-sizing: border-box;
    max-width: 100% !important;
    margin: 0.75rem auto !important;
    padding: 0.75rem 1rem !important;
  }

  .mw-content-container,
  .mw-page-container,
  .vector-page {
    padding: 0 !important;
  }
}

/* 3. kill the sidebar TOC on mobile (Vector 2022) */
@media (max-width: 1100px) {
  .vector-toc,
  .vector-toc-pinned-container,
  .vector-toc-pinnable-header {
    display: none !important;
  }
}

/* 4. infobox / navbox / worldnav: stack under heading */
@media (max-width: 1100px) {
  .infobox,
  .navbox,
  .metadata,
  .worldnav {
    float: none !important;
    clear: both !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0.5rem 0 1rem 0 !important;
    padding: 0.6rem 0.75rem !important;
    box-sizing: border-box;
  }
}

/* 5. headings: slightly smaller so they don't dominate */
@media (max-width: 600px) {
  #firstHeading,
  .mw-page-title-main {
    font-size: 1.4em !important;
  }

  .mw-body h1 {
    font-size: 1.3em !important;
  }

  .mw-body h2 {
    font-size: 1.15em !important;
  }
}