Jump to content

MediaWiki:Common.css

From AOWIS
Revision as of 06:28, 18 March 2026 by Samuel (talk | contribs)

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 */

/* Hide the title on the Main Page */
.page-Main_Page #firstHeading,
.page-Main_Page #siteSub {
    display: none;
}

/* ============================================
   MAIN PAGE — Vector 2022 custom layout
   ============================================ */

/* Enable full-width layout + hamburger sidebar on Main Page */
body.page-Main_Page.skin-vector-2022 {
    --vector-limited-width: 100%;
    --vector-feature-limited-width: 0;
}

/* Move TOC into the top toolbar (Wikipedia Main Page behavior) */
body.page-Main_Page.skin-vector-2022 {
    --vector-feature-toc-pinned: 0;
    --vector-toc-width: 0;
}

/* MAIN PAGE ONLY — hide the sidebar TOC */
body.page-Main_Page.skin-vector-2022 .vector-toc,
body.page-Main_Page.skin-vector-2022 #vector-toc-pinned-container {
    display: none !important;
}

/* Show the TOC toggle button in the toolbar */
body.page-Main_Page.skin-vector-2022 .vector-page-toolbar .vector-toc-toggle {
    display: inline-flex !important;
}

/* ============================================
   MAIN PAGE — EXPAND CONTENT TO FULL WIDTH
   ============================================ */

/* Expand the entire layout grid */
body.page-Main_Page.skin-vector-2022 .vector-main-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Expand the content container (removes Vector’s width cap) */
body.page-Main_Page.skin-vector-2022 .mw-content-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 1rem !important; /* like Wikipedia */
}

/* Expand the actual content column */
body.page-Main_Page.skin-vector-2022 .mw-content-ltr {
    max-width: 100% !important;
    width: 100% !important;
}







/* Put Stuff Next to Each Other */
.hbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1em; /* spacing between boxes */
}

.hbox-row > * {
    flex: 1 1 300px; /* responsive width */
}

/* Main Page Banner */
.skin-vector-dark .mainpage-banner {
    border-color: var(--border-color-base, #3a3a3a);
}

.skin-vector-dark .mainpage-banner-text h1,
.skin-vector-dark .mainpage-banner-text p {
    color: var(--color-base, #e6e6e6);
}

/* Fix inline wrapper that breaks alignment */
.mainpage-banner figure.mainpage-logo > span {
    display: block !important;
}

/* Remove default thumb margins */
.mainpage-banner figure.mainpage-logo {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Optional: remove caption space entirely */
.mainpage-banner figure.mainpage-logo figcaption {
    display: none !important;
}

/* MAIN PAGE — make the banner full-width */
body.page-Main_Page.skin-vector-2022 .mainpage-banner {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* MAIN PAGE — ensure inner banner content also stretches */
body.page-Main_Page.skin-vector-2022 .mainpage-banner > * {
    max-width: 100% !important;
    width: 100% !important;
}






/* ----------------------------- */
/* Base styling for all boxes    */
/* ----------------------------- */
.mw-parser-output .color-box {
  border-radius: 4px;
  padding: 0.75em 1em;
  margin: 0.75em 0;
  border: 1px solid transparent;
  font-size: 95%;
}

/* ----------------------------- */
/* LIGHT THEME COLORS            */
/* ----------------------------- */
.mw-parser-output .color-box--green {
  background:#e6f4ea; color:#0a5c2a; border-color:#b7e1c0;
}
.mw-parser-output .color-box--turquoise {
  background:#e0f7f9; color:#006b6b; border-color:#b3e6ea;
}
.mw-parser-output .color-box--blue {
  background:#e6f0ff; color:#0645ad; border-color:#c0d4ff;
}
.mw-parser-output .color-box--yellow {
  background:#fff8d6; color:#7a5a00; border-color:#f2e2a0;
}
.mw-parser-output .color-box--red {
  background:#ffe6e6; color:#b00020; border-color:#f5b3b3;
}
.mw-parser-output .color-box--brown {
  background:#f3e6dc; color:#5b3b1f; border-color:#d9bda3;
}
.mw-parser-output .color-box--purple {
  background:#f1e6ff; color:#5b2b8a; border-color:#d3b8ff;
}

/* ----------------------------- */
/* DARK THEME COLORS             */
/* Vector 2022 dark mode class   */
/* ----------------------------- */
html.skin-theme-clientpref-night .mw-parser-output .color-box--green {
  background:#0f2d1f; color:#b5f7c8; border-color:#1f5a37;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--turquoise {
  background:#062b30; color:#9df2f2; border-color:#0f5a61;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--blue {
  background:#0a1c33; color:#a9c7ff; border-color:#234a7a;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--yellow {
  background:#2f2804; color:#ffeaa0; border-color:#7a6510;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--red {
  background:#2f0c0f; color:#ffb3b8; border-color:#7a1f26;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--brown {
  background:#24170f; color:#e2c3a3; border-color:#5b3b24;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--purple {
  background:#1f102d; color:#d7b8ff; border-color:#4f2f7a;
}

/* =============================== */
/*   MAIN PAGE–STYLE HEADER BOXES  */
/* =============================== */

.mw-parser-output .header-box {
  border-radius: 4px;
  margin: 1em 0;
  border: 1px solid transparent;
  overflow: hidden;
  font-size: 95%;
}

/* Header area */
.mw-parser-output .header-box__title {
  padding: 0.5em 0.75em;
  font-weight: bold;
  font-size: 110%;
}

/* Body area */
.mw-parser-output .header-box__body {
  padding: 0.75em 1em;
  background: var(--hb-body-bg);
  /* color: var(--hb-body-text); */
}

/* =============================== */
/* LIGHT THEME COLORS              */
/* =============================== */

.mw-parser-output .header-box--green {
  --hb-header-bg: #0a5c2a;
  --hb-header-text: #ffffff;
  --hb-body-bg: #e6f4ea;
  --hb-body-text: #0a5c2a;
  border-color: #b7e1c0;
}

.mw-parser-output .header-box--turquoise {
  --hb-header-bg: #006b6b;
  --hb-header-text: #ffffff;
  --hb-body-bg: #e0f7f9;
  --hb-body-text: #006b6b;
  border-color: #b3e6ea;
}

.mw-parser-output .header-box--blue {
  --hb-header-bg: #0645ad;
  --hb-header-text: #ffffff;
  --hb-body-bg: #e6f0ff;
  --hb-body-text: #0645ad;
  border-color: #c0d4ff;
}

.mw-parser-output .header-box--yellow {
  --hb-header-bg: #7a5a00;
  --hb-header-text: #ffffff;
  --hb-body-bg: #fff8d6;
  --hb-body-text: #7a5a00;
  border-color: #f2e2a0;
}

.mw-parser-output .header-box--red {
  --hb-header-bg: #b00020;
  --hb-header-text: #ffffff;
  --hb-body-bg: #ffe6e6;
  --hb-body-text: #b00020;
  border-color: #f5b3b3;
}

.mw-parser-output .header-box--brown {
  --hb-header-bg: #5b3b1f;
  --hb-header-text: #ffffff;
  --hb-body-bg: #f3e6dc;
  --hb-body-text: #5b3b1f;
  border-color: #d9bda3;
}

.mw-parser-output .header-box--purple {
  --hb-header-bg: #5b2b8a;
  --hb-header-text: #ffffff;
  --hb-body-bg: #f1e6ff;
  --hb-body-text: #5b2b8a;
  border-color: #d3b8ff;
}

.mw-parser-output .header-box--lightblue {
  --hb-header-bg: #1e6bd6;
  --hb-header-text: #ffffff;
  --hb-body-bg: #e6f2ff;
  --hb-body-text: #1e6bd6;
  border-color: #bcd7ff;
}

.mw-parser-output .header-box--grey {
  --hb-header-bg: #555555;
  --hb-header-text: #ffffff;
  --hb-body-bg: #f2f2f2;
  --hb-body-text: #333333;
  border-color: #cccccc;
}


/* Apply header colors */
.mw-parser-output .header-box__title {
  background: var(--hb-header-bg);
  color: var(--hb-header-text);
}

/* =============================== */
/* DARK THEME (Vector 2022)        */
/* =============================== */

html.skin-theme-clientpref-night .mw-parser-output .header-box--green,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--green,
html.skin-theme-clientpref-os .mw-parser-output .header-box--green {
  --hb-header-bg: #1f5a37;
  --hb-header-text: #d9ffe8;
  --hb-body-bg: #0f2d1f;
  --hb-body-text: #b5f7c8;
  border-color: #1f5a37;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--turquoise,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--turquoise,
html.skin-theme-clientpref-os .mw-parser-output .header-box--turquoise {
  --hb-header-bg: #0f5a61;
  --hb-header-text: #d9ffff;
  --hb-body-bg: #062b30;
  --hb-body-text: #9df2f2;
  border-color: #0f5a61;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--blue,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--blue,
html.skin-theme-clientpref-os .mw-parser-output .header-box--blue {
  --hb-header-bg: #234a7a;
  --hb-header-text: #dce8ff;
  --hb-body-bg: #0a1c33;
  --hb-body-text: #a9c7ff;
  border-color: #234a7a;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--yellow,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--yellow,
html.skin-theme-clientpref-os .mw-parser-output .header-box--yellow {
  --hb-header-bg: #7a6510;
  --hb-header-text: #fff5c2;
  --hb-body-bg: #2f2804;
  --hb-body-text: #ffeaa0;
  border-color: #7a6510;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--red,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--red,
html.skin-theme-clientpref-os .mw-parser-output .header-box--red {
  --hb-header-bg: #7a1f26;
  --hb-header-text: #ffd6da;
  --hb-body-bg: #2f0c0f;
  --hb-body-text: #ffb3b8;
  border-color: #7a1f26;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--brown,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--brown,
html.skin-theme-clientpref-os .mw-parser-output .header-box--brown {
  --hb-header-bg: #5b3b24;
  --hb-header-text: #f2dec9;
  --hb-body-bg: #24170f;
  --hb-body-text: #e2c3a3;
  border-color: #5b3b24;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--purple,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--purple,
html.skin-theme-clientpref-os .mw-parser-output .header-box--purple {
  --hb-header-bg: #4f2f7a;
  --hb-header-text: #ecd9ff;
  --hb-body-bg: #1f102d;
  --hb-body-text: #d7b8ff;
  border-color: #4f2f7a;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--lightblue,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--lightblue,
html.skin-theme-clientpref-os .mw-parser-output .header-box--lightblue {
  --hb-header-bg: #2a4f8a;
  --hb-header-text: #dce8ff;
  --hb-body-bg: #0a1626;
  --hb-body-text: #a9c7ff;
  border-color: #2a4f8a;
}

html.skin-theme-clientpref-night .mw-parser-output .header-box--grey,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--grey,
html.skin-theme-clientpref-os .mw-parser-output .header-box--grey {
  --hb-header-bg: #3a3a3a;
  --hb-header-text: #e6e6e6;
  --hb-body-bg: #1a1a1a;
  --hb-body-text: #cccccc;
  border-color: #3a3a3a;
}






/* MAIN PAGE — go truly full-width in Vector 2022, no JS */

/* 1) Outer page container */
body.page-Main_Page.skin-vector-2022 .mw-page-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* 2) Main layout grid */
body.page-Main_Page.skin-vector-2022 .vector-main-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* 3) Workspace/content wrapper (varies by version) */
body.page-Main_Page.skin-vector-2022 .mw-workspace-container,
body.page-Main_Page.skin-vector-2022 .mw-content-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 4) Actual content column */
body.page-Main_Page.skin-vector-2022 .mw-content-ltr {
    max-width: 100% !important;
    width: 100% !important;
}
Retrieved from "https://aowis.org/index.php?title=MediaWiki:Common.css&oldid=66"