Jump to content

MediaWiki:Common.css

From RetroTechCollection

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.
/* ============================================
   RTC Wiki Common.css
   Supports both light and dark mode (Vector 2022)
   ============================================ */

/* ---- BASE INFOBOX STYLING ---- */
.infobox {
    background-color: #f9f9f9;
    border: 1px solid #aaa;
    border-spacing: 0;
    padding: 5px;
    margin: 0 0 1em 1em;
    font-size: 92%;
    line-height: 1.5;
    width: 300px !important;
    max-width: 320px;
    float: right !important;
    margin-left: 10px !important;
}

.infobox caption {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
    padding-bottom: 8px;
}

.infobox th {
    background-color: #eeeeee;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

.infobox td {
    text-align: left;
    padding: 5px;
}

.infobox img {
    max-width: 250px;
    height: auto;
    display: block;
    margin: 5px auto;
}

.infobox tr {
    border-bottom: 1px solid #ddd;
}

.infobox th, .infobox td {
    border-collapse: collapse;
}

/* ---- VILLAGE PUMP GRID CARDS ---- */
.vp-card {
    vertical-align: top;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
}

/* ---- HELP PAGE SECTIONS ---- */
.help-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}

/* ============================================
   DARK MODE — Vector 2022
   Triggered by html.skin-theme-clientpref-night
   or the OS-level prefers-color-scheme: dark
   ============================================ */

/* Dark mode via user preference toggle */
html.skin-theme-clientpref-night .infobox,
html.skin-theme-clientpref-night .vp-card,
html.skin-theme-clientpref-night .help-section {
    background-color: #2b2b2f;
    border-color: #4a4a50;
    color: #e0e0e0;
}

html.skin-theme-clientpref-night .infobox th {
    background-color: #3a3a40;
    color: #e0e0e0;
}

html.skin-theme-clientpref-night .infobox tr {
    border-bottom-color: #4a4a50;
}

/* CategoryHeaderBox dark mode */
html.skin-theme-clientpref-night .category-header-table {
    background-color: #2b2b2f;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

html.skin-theme-clientpref-night .category-header-title {
    background-color: #2d6a9f;
}

html.skin-theme-clientpref-night .category-header-subtitle {
    color: #d0d0d0;
}

/* Wikitable dark mode */
html.skin-theme-clientpref-night .wikitable {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .wikitable th {
    background-color: #3a3a40 !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .wikitable td {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .wikitable caption {
    color: #e0e0e0 !important;
}

/* Styled table dark mode */
html.skin-theme-clientpref-night table.styled-table {
    background-color: #2b2b2f;
    color: #e0e0e0;
    border-color: #4a4a50;
}

html.skin-theme-clientpref-night table.styled-table th {
    background-color: #2d6a9f;
    color: #ffffff;
}

/* Message boxes (ambox, ombox, cmbox, etc.) dark mode */
html.skin-theme-clientpref-night .ambox,
html.skin-theme-clientpref-night .ombox,
html.skin-theme-clientpref-night .cmbox,
html.skin-theme-clientpref-night .tmbox,
html.skin-theme-clientpref-night .fmbox {
    background-color: #2b2b2f;
    border-color: #4a4a50;
    color: #e0e0e0;
}

/* Inline styles with light backgrounds (common in templates) */
html.skin-theme-clientpref-night [style*="background:#f9f9f9"],
html.skin-theme-clientpref-night [style*="background-color:#f9f9f9"],
html.skin-theme-clientpref-night [style*="background: #f9f9f9"],
html.skin-theme-clientpref-night [style*="background-color: #f9f9f9"] {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
}

html.skin-theme-clientpref-night [style*="background:#fff"],
html.skin-theme-clientpref-night [style*="background-color:#fff"],
html.skin-theme-clientpref-night [style*="background:#ffffff"],
html.skin-theme-clientpref-night [style*="background-color:#ffffff"],
html.skin-theme-clientpref-night [style*="background: #fff"],
html.skin-theme-clientpref-night [style*="background-color: #fff"] {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
}

html.skin-theme-clientpref-night [style*="background:#e8f4fa"],
html.skin-theme-clientpref-night [style*="background-color:#e8f4fa"],
html.skin-theme-clientpref-night [style*="background: #e8f4fa"],
html.skin-theme-clientpref-night [style*="background-color: #e8f4fa"] {
    background-color: #1e3a4f !important;
    color: #e0e0e0 !important;
}

html.skin-theme-clientpref-night [style*="background:#f8f8f8"],
html.skin-theme-clientpref-night [style*="background-color:#f8f8f8"],
html.skin-theme-clientpref-night [style*="background-color: #f8f8f8"] {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
}

html.skin-theme-clientpref-night [style*="background-color:#f2f2f2"],
html.skin-theme-clientpref-night [style*="background-color: #f2f2f2"] {
    background-color: #3a3a40 !important;
    color: #e0e0e0 !important;
}

/* Village Pump main table dark mode */
html.skin-theme-clientpref-night [style*="background:#4B9CD3"],
html.skin-theme-clientpref-night [style*="background-color:#4B9CD3"] {
    background-color: #2d6a9f !important;
}

/* Table borders in dark mode */
html.skin-theme-clientpref-night [style*="border:1px solid #aaa"],
html.skin-theme-clientpref-night [style*="border: 1px solid #aaa"] {
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night [style*="border:1px solid #ddd"],
html.skin-theme-clientpref-night [style*="border: 1px solid #ddd"] {
    border-color: #4a4a50 !important;
}

/* Links in dark mode - keep them readable */
html.skin-theme-clientpref-night .wikitable a,
html.skin-theme-clientpref-night .infobox a,
html.skin-theme-clientpref-night .category-header-subtitle a {
    color: #6db3f2;
}

html.skin-theme-clientpref-night .wikitable a:visited,
html.skin-theme-clientpref-night .infobox a:visited {
    color: #b695d6;
}

/* PDF embed dark mode */
html.skin-theme-clientpref-night .pdf-embed {
    background-color: #2b2b2f;
    border-color: #4a4a50;
}

/* ---- OS-LEVEL DARK MODE FALLBACK ---- */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox,
    html.skin-theme-clientpref-os .vp-card,
    html.skin-theme-clientpref-os .help-section {
        background-color: #2b2b2f;
        border-color: #4a4a50;
        color: #e0e0e0;
    }

    html.skin-theme-clientpref-os .infobox th {
        background-color: #3a3a40;
        color: #e0e0e0;
    }

    html.skin-theme-clientpref-os .category-header-table {
        background-color: #2b2b2f;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    html.skin-theme-clientpref-os .category-header-title {
        background-color: #2d6a9f;
    }

    html.skin-theme-clientpref-os .category-header-subtitle {
        color: #d0d0d0;
    }

    html.skin-theme-clientpref-os .wikitable {
        background-color: #2b2b2f !important;
        color: #e0e0e0 !important;
        border-color: #4a4a50 !important;
    }

    html.skin-theme-clientpref-os .wikitable th {
        background-color: #3a3a40 !important;
        color: #e0e0e0 !important;
        border-color: #4a4a50 !important;
    }

    html.skin-theme-clientpref-os .wikitable td {
        background-color: #2b2b2f !important;
        color: #e0e0e0 !important;
        border-color: #4a4a50 !important;
    }

    html.skin-theme-clientpref-os table.styled-table {
        background-color: #2b2b2f;
        color: #e0e0e0;
        border-color: #4a4a50;
    }

    html.skin-theme-clientpref-os table.styled-table th {
        background-color: #2d6a9f;
        color: #ffffff;
    }

    html.skin-theme-clientpref-os .ambox,
    html.skin-theme-clientpref-os .ombox,
    html.skin-theme-clientpref-os .cmbox,
    html.skin-theme-clientpref-os .tmbox,
    html.skin-theme-clientpref-os .fmbox {
        background-color: #2b2b2f;
        border-color: #4a4a50;
        color: #e0e0e0;
    }

    html.skin-theme-clientpref-os .wikitable a,
    html.skin-theme-clientpref-os .infobox a {
        color: #6db3f2;
    }
}

/* ============================================
   DARK MODE FIX — Infoboxes & Inline Styles
   Override inline background colours used in templates
   ============================================ */

html.skin-theme-clientpref-night .infobox {
    background-color: #2b2b2f !important;
    border-color: #4a4a50 !important;
    color: #e0e0e0 !important;
}

html.skin-theme-clientpref-night .infobox caption {
    color: #e0e0e0 !important;
}

html.skin-theme-clientpref-night .infobox th {
    background-color: #3a3a40 !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .infobox td {
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .infobox tr {
    border-bottom-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .infobox a {
    color: #6db3f2 !important;
}

html.skin-theme-clientpref-night .infobox a:visited {
    color: #b695d6 !important;
}

/* Catch inline backgrounds in parser output */
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#f9f9f9"] {
    background-color: #2b2b2f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background: #f9f9f9"] {
    background-color: #2b2b2f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background-color:#f9f9f9"] {
    background-color: #2b2b2f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#ddd"] {
    background-color: #3a3a40 !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#eeeeee"],
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#eee"] {
    background-color: #3a3a40 !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#fff"],
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#ffffff"],
html.skin-theme-clientpref-night .mw-parser-output [style*="background: #fff"] {
    background-color: #2b2b2f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#e8f4fa"],
html.skin-theme-clientpref-night .mw-parser-output [style*="background-color:#e8f4fa"] {
    background-color: #1e3a4f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#f8f8f8"] {
    background-color: #2b2b2f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#fee"] {
    background-color: #3f2b2b !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background-color:#4B9CD3"],
html.skin-theme-clientpref-night .mw-parser-output [style*="background:#4B9CD3"] {
    background-color: #2d6a9f !important;
}
html.skin-theme-clientpref-night .mw-parser-output [style*="background-color:#f2f2f2"],
html.skin-theme-clientpref-night .mw-parser-output [style*="background-color: #f2f2f2"] {
    background-color: #3a3a40 !important;
}

/* Ensure all infobox text is readable in dark mode */
html.skin-theme-clientpref-night .mw-parser-output .infobox,
html.skin-theme-clientpref-night .mw-parser-output .infobox * {
    color: #e0e0e0;
}
html.skin-theme-clientpref-night .mw-parser-output .infobox a {
    color: #6db3f2 !important;
}

/* OS-level dark mode */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox {
        background-color: #2b2b2f !important;
        border-color: #4a4a50 !important;
        color: #e0e0e0 !important;
    }
    html.skin-theme-clientpref-os .infobox th {
        background-color: #3a3a40 !important;
        color: #e0e0e0 !important;
    }
    html.skin-theme-clientpref-os .infobox td,
    html.skin-theme-clientpref-os .infobox caption {
        color: #e0e0e0 !important;
    }
    html.skin-theme-clientpref-os .infobox a {
        color: #6db3f2 !important;
    }
    html.skin-theme-clientpref-os .mw-parser-output [style*="background:#ddd"] {
        background-color: #3a3a40 !important;
    }
    html.skin-theme-clientpref-os .mw-parser-output [style*="background:#f9f9f9"] {
        background-color: #2b2b2f !important;
    }
    html.skin-theme-clientpref-os .mw-parser-output [style*="background:#eee"],
    html.skin-theme-clientpref-os .mw-parser-output [style*="background:#eeeeee"] {
        background-color: #3a3a40 !important;
    }
}

/* ---- NAVBOX DARK MODE ---- */
html.skin-theme-clientpref-night .navbox {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .navbox-inner {
    background-color: #2b2b2f !important;
}

html.skin-theme-clientpref-night .navbox-title {
    background-color: #2d6a9f !important;
    color: #ffffff !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .navbox-title a {
    color: #ffffff !important;
}

html.skin-theme-clientpref-night .navbox-group {
    background-color: #3a3a40 !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .navbox-list,
html.skin-theme-clientpref-night .navbox-odd,
html.skin-theme-clientpref-night .navbox-even {
    background-color: #2b2b2f !important;
    color: #e0e0e0 !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .navbox-even {
    background-color: #323236 !important;
}

html.skin-theme-clientpref-night .navbox a {
    color: #6db3f2 !important;
}

html.skin-theme-clientpref-night .navbox a:visited {
    color: #b695d6 !important;
}

html.skin-theme-clientpref-night .navbox-subgroup {
    background-color: #2b2b2f !important;
    border-color: #4a4a50 !important;
}

html.skin-theme-clientpref-night .navbox th,
html.skin-theme-clientpref-night .navbox td {
    border-color: #4a4a50 !important;
}

/* Navbox - OS dark mode */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .navbox {
        background-color: #2b2b2f !important;
        color: #e0e0e0 !important;
        border-color: #4a4a50 !important;
    }
    html.skin-theme-clientpref-os .navbox-title {
        background-color: #2d6a9f !important;
        color: #ffffff !important;
    }
    html.skin-theme-clientpref-os .navbox-group {
        background-color: #3a3a40 !important;
        color: #e0e0e0 !important;
    }
    html.skin-theme-clientpref-os .navbox-list,
    html.skin-theme-clientpref-os .navbox-odd,
    html.skin-theme-clientpref-os .navbox-even {
        background-color: #2b2b2f !important;
        color: #e0e0e0 !important;
    }
    html.skin-theme-clientpref-os .navbox-even {
        background-color: #323236 !important;
    }
    html.skin-theme-clientpref-os .navbox a {
        color: #6db3f2 !important;
    }
}

/* ---- NAVBOX ENTRIES WITH NO PAGE YET ----
   Navboxes list the full model range, including machines the wiki has not
   covered yet. Those entries are rendered as plain text rather than red
   links, because a navbox is transcluded on hundreds of pages and its red
   links appear on every one of them. Styled to read as "listed, not written"
   rather than as broken. Maintained by wiki-tooling/navbox_greyout.py. */
.navbox-unwritten {
    color: #72777d;
    cursor: default;
}
@media screen {
    html.skin-theme-clientpref-night .navbox-unwritten { color: #9aa0a6; }
}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .navbox-unwritten { color: #9aa0a6; }
}
Retrieved from "https://retrotechwiki.com/index.php?title=MediaWiki:Common.css&oldid=12887"