MediaWiki:Common.css: Difference between revisions

/* 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 – CLEAN FULL WIDTH          */
/* ===================================== */

/* Hide the sidebar TOC (Contents / Beginning) */
.page-Main_Page .vector-column-start {
  display: none !important;
}

/* Kill the page container width limiter and padding */
.page-Main_Page .mw-page-container-inner {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Expand content container and body fully */
.page-Main_Page .mw-content-container,
.page-Main_Page .mw-body,
.page-Main_Page #content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !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 */
}







/* ----------------------------- */
/* 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;
}
.mw-parser-output .color-box--rosa {
  background:#ffeaf3; color:#a0004f; border-color:#f5bfd8;
}

/* ----------------------------- */
/* 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;
}
html.skin-theme-clientpref-night .mw-parser-output .color-box--rosa {
  background:#2d0f1f; color:#ffb8d8; border-color:#7a2f57;
}

/* =============================== */
/*   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%;*/
  display: flex;
  flex-direction: column;
}

/* 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); */
  flex-grow: 1;
}

/* =============================== */
/* 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: #43d3ff;
  --hb-header-text: #0c2c55;
  --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;
}
.mw-parser-output .header-box--rosa {
  --hb-header-bg: #e88cab;
  --hb-header-text: #5c1f33;
  --hb-body-bg: #fff1f5;
  --hb-body-text: #7a3048;
  border-color: #f3c7d6;
}
.mw-parser-output .header-box--orange {
  --hb-header-bg: #e89a3d;
  --hb-header-text: #4d2a00;
  --hb-body-bg: #fff4e8;
  --hb-body-text: #7a4a12;
  border-color: #f3c996;
}
.mw-parser-output .header-box--teal {
  --hb-header-bg: #3c9d96;
  --hb-header-text: #ffffff;
  --hb-body-bg: #eaf8f7;
  --hb-body-text: #1d5c57;
  border-color: #a9dcd7;
}
.mw-parser-output .header-box--indigo {
  --hb-header-bg: #6c63c9;
  --hb-header-text: #ffffff;
  --hb-body-bg: #f1f0ff;
  --hb-body-text: #3d3678;
  border-color: #c5c1f0;
}

/* 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;
}
html.skin-theme-clientpref-night .mw-parser-output .header-box--rosa,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--rosa,
html.skin-theme-clientpref-os .mw-parser-output .header-box--rosa {
  --hb-header-bg: #7a2f57;
  --hb-header-text: #ffe6f0;
  --hb-body-bg: #2d0f1f;
  --hb-body-text: #ffb8d8;
  border-color: #7a2f57;
}
html.skin-theme-clientpref-night .mw-parser-output .header-box--orange,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--orange,
html.skin-theme-clientpref-os .mw-parser-output .header-box--orange {
  --hb-header-bg: #8a5620;
  --hb-header-text: #fff1df;
  --hb-body-bg: #2b1b0d;
  --hb-body-text: #f2c38a;
  border-color: #8a5620;
}
html.skin-theme-clientpref-night .mw-parser-output .header-box--teal,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--teal,
html.skin-theme-clientpref-os .mw-parser-output .header-box--teal {
  --hb-header-bg: #245f5a;
  --hb-header-text: #eafffd;
  --hb-body-bg: #112322;
  --hb-body-text: #9ed9d4;
  border-color: #245f5a;
}
html.skin-theme-clientpref-night .mw-parser-output .header-box--indigo,
html.skin-theme-clientpref-dark .mw-parser-output .header-box--indigo,
html.skin-theme-clientpref-os .mw-parser-output .header-box--indigo {
  --hb-header-bg: #40388a;
  --hb-header-text: #f2f0ff;
  --hb-body-bg: #18162b;
  --hb-body-text: #c7c2ff;
  border-color: #40388a;
}