MediaWiki:Common.css
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.
/* WikiMesothelioma.com — Dark Mode + Responsive CSS */
/* Skin: Vector 2022 */
/* Dark mode triggers: */
/* 1. @media (prefers-color-scheme: dark) — OS-level dark mode ("Automatic" setting) */
/* 2. html.skin-theme-clientpref-night — Vector's manual "Dark" toggle */
/* ===== FAQ HIGHLIGHT BOX ===== */
/* Used on Main Page and other highlight boxes */
.faq-highlight-box {
background-color: #f8f9fa;
}
/* ===== DARK MODE OVERRIDES — OS "Automatic" ===== */
/* Fires when user selects "Automatic" in Vector appearance AND their OS is in dark mode */
@media (prefers-color-scheme: dark) {
/* ----- FAQ Highlight Box Fix ----- */
html:not(.skin-theme-clientpref-day) .faq-highlight-box,
html:not(.skin-theme-clientpref-day) .faq-highlight-box td,
html:not(.skin-theme-clientpref-day) .faq-highlight-box table {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ----- Infobox Fixes ----- */
/* :not(.skin-theme-clientpref-day) prevents these from firing when user
has explicitly selected Vector light mode — OS dark preference is
suppressed. "Automatic" users (no clientpref class) still get dark. */
/* Override white backgrounds that become invisible */
html:not(.skin-theme-clientpref-day) .infobox,
html:not(.skin-theme-clientpref-day) .infobox td,
html:not(.skin-theme-clientpref-day) .infobox th {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
/* Infobox header - keep the blue but ensure text is visible */
html:not(.skin-theme-clientpref-day) .infobox th[style*="background:#1a5276"],
html:not(.skin-theme-clientpref-day) .infobox td[style*="background:#1a5276"] {
background-color: #1a5276 !important;
color: #ffffff !important;
}
/* Light gray backgrounds in infoboxes */
html:not(.skin-theme-clientpref-day) td[style*="background:#f8f9fa"],
html:not(.skin-theme-clientpref-day) td[style*="background: #f8f9fa"],
html:not(.skin-theme-clientpref-day) div[style*="background:#f8f9fa"],
html:not(.skin-theme-clientpref-day) [style*="background:#f8f9fa"] {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* Light blue backgrounds */
html:not(.skin-theme-clientpref-day) td[style*="background:#e8f4f8"],
html:not(.skin-theme-clientpref-day) [style*="background:#e8f4f8"] {
background-color: #1a3a4a !important;
color: #e0e0e0 !important;
}
/* ----- Alert/Callout Box Fixes ----- */
/* Warning boxes (yellow) */
html:not(.skin-theme-clientpref-day) [style*="background:#fff3cd"],
html:not(.skin-theme-clientpref-day) div[style*="background:#fff3cd"],
html:not(.skin-theme-clientpref-day) td[style*="background:#fff3cd"] {
background-color: #4a3f00 !important;
border-color: #ffc107 !important;
}
/* Warning text color - was #856404, invisible on dark */
html:not(.skin-theme-clientpref-day) [style*="color:#856404"],
html:not(.skin-theme-clientpref-day) td[style*="color:#856404"],
html:not(.skin-theme-clientpref-day) div[style*="color:#856404"] {
color: #ffd54f !important;
}
/* Success boxes (green) */
html:not(.skin-theme-clientpref-day) [style*="background:#d4edda"],
html:not(.skin-theme-clientpref-day) div[style*="background:#d4edda"],
html:not(.skin-theme-clientpref-day) td[style*="background:#d4edda"] {
background-color: #1a3d1a !important;
border-color: #28a745 !important;
}
/* Success text color - was #155724, invisible on dark */
html:not(.skin-theme-clientpref-day) [style*="color:#155724"],
html:not(.skin-theme-clientpref-day) td[style*="color:#155724"],
html:not(.skin-theme-clientpref-day) div[style*="color:#155724"] {
color: #81c784 !important;
}
/* Info boxes (blue) */
html:not(.skin-theme-clientpref-day) [style*="background:#cce5ff"],
html:not(.skin-theme-clientpref-day) div[style*="background:#cce5ff"],
html:not(.skin-theme-clientpref-day) td[style*="background:#cce5ff"] {
background-color: #1a3a5c !important;
border-color: #007bff !important;
}
/* Info text color */
html:not(.skin-theme-clientpref-day) [style*="color:#004085"],
html:not(.skin-theme-clientpref-day) td[style*="color:#004085"],
html:not(.skin-theme-clientpref-day) div[style*="color:#004085"] {
color: #90caf9 !important;
}
/* ----- Wikitable Fixes ----- */
html:not(.skin-theme-clientpref-day) .wikitable {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
html:not(.skin-theme-clientpref-day) .wikitable td,
html:not(.skin-theme-clientpref-day) .wikitable th {
border-color: #444 !important;
}
/* Table headers with blue background - keep them but ensure contrast */
html:not(.skin-theme-clientpref-day) .wikitable th[style*="background:#1a5276"],
html:not(.skin-theme-clientpref-day) th[style*="background:#1a5276"] {
background-color: #1a5276 !important;
color: #ffffff !important;
}
/* ----- Quote Box Fixes ----- */
/* Quote boxes with light backgrounds */
html:not(.skin-theme-clientpref-day) [style*="background:#f8f9fa"][style*="border-left:4px solid #1a5276"],
html:not(.skin-theme-clientpref-day) div[style*="background:#f8f9fa"][style*="border-left"] {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ----- White Background Override ----- */
html:not(.skin-theme-clientpref-day) [style*="background:#ffffff"],
html:not(.skin-theme-clientpref-day) [style*="background: #ffffff"],
html:not(.skin-theme-clientpref-day) [style*="background:white"],
html:not(.skin-theme-clientpref-day) [style*="background: white"] {
background-color: #1e1e1e !important;
}
/* ----- Border Color Fixes ----- */
html:not(.skin-theme-clientpref-day) [style*="border-bottom:1px solid #dee2e6"] {
border-bottom-color: #444 !important;
}
/* ----- General Text Visibility ----- */
/* Ensure any dark text colors become light */
html:not(.skin-theme-clientpref-day) [style*="color:#212529"],
html:not(.skin-theme-clientpref-day) [style*="color: #212529"],
html:not(.skin-theme-clientpref-day) [style*="color:black"],
html:not(.skin-theme-clientpref-day) [style*="color: black"] {
color: #e0e0e0 !important;
}
/* Gray text - make visible */
html:not(.skin-theme-clientpref-day) [style*="color:#666"] {
color: #a0a0a0 !important;
}
/* ----- Danger/Error boxes (red) ----- */
html:not(.skin-theme-clientpref-day) [style*="background:#f8d7da"],
html:not(.skin-theme-clientpref-day) div[style*="background:#f8d7da"],
html:not(.skin-theme-clientpref-day) td[style*="background:#f8d7da"] {
background-color: #4a1a1a !important;
border-color: #dc3545 !important;
}
html:not(.skin-theme-clientpref-day) [style*="color:#721c24"],
html:not(.skin-theme-clientpref-day) td[style*="color:#721c24"],
html:not(.skin-theme-clientpref-day) div[style*="color:#721c24"] {
color: #f5a0a0 !important;
}
/* ----- Navy/Dark blue backgrounds ----- */
html:not(.skin-theme-clientpref-day) [style*="background:#1a365d"],
html:not(.skin-theme-clientpref-day) div[style*="background:#1a365d"] {
background-color: #1a365d !important;
color: #ffffff !important;
}
/* ----- Gradient backgrounds ----- */
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient"] {
color: #ffffff !important;
}
/* ----- CTA orange button gradient ----- */
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient(135deg, #ff6b35"] {
color: #ffffff !important;
}
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient(135deg, #ff6b35"] span {
color: #ffffff !important;
}
/* ----- Light colored text that needs darkening ----- */
html:not(.skin-theme-clientpref-day) [style*="color:#e8f4f8"],
html:not(.skin-theme-clientpref-day) [style*="color:#e2e8f0"] {
color: #b0d0e0 !important;
}
/* Blue accent text */
html:not(.skin-theme-clientpref-day) [style*="color:#2980b9"] {
color: #5dade2 !important;
}
/* ----- Dark gray body text — most common uncovered value (502 occurrences) ----- */
/* #333 / #333333 are used for section headers, body copy, and label text in EEAT pages */
html:not(.skin-theme-clientpref-day) [style*="color:#333333"],
html:not(.skin-theme-clientpref-day) [style*="color:#333"] {
color: #e0e0e0 !important;
}
/* ----- Dark navy text (#1a5276) ----- */
/* Used as accent / heading text color on a light background — invisible on dark */
html:not(.skin-theme-clientpref-day) [style*="color:#1a5276"] {
color: #5dade2 !important;
}
/* ----- Dark green text (#1a7431) ----- */
html:not(.skin-theme-clientpref-day) [style*="color:#1a7431"] {
color: #81c784 !important;
}
/* ----- Dark orange text (#d35400) ----- */
html:not(.skin-theme-clientpref-day) [style*="color:#d35400"] {
color: #ffaa66 !important;
}
/* ----- Light blue-gray section backgrounds ----- */
/* Used in state pages and clinical pages for alternating row / section shading */
html:not(.skin-theme-clientpref-day) [style*="background:#f0f4f8"],
html:not(.skin-theme-clientpref-day) [style*="background:#f0f4f7"],
html:not(.skin-theme-clientpref-day) [style*="background:#eaf2f8"],
html:not(.skin-theme-clientpref-day) [style*="background:#e8eef7"] {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ----- Orange CTA backgrounds (#e67e22) — ensure text legibility ----- */
html:not(.skin-theme-clientpref-day) [style*="background:#e67e22"] {
color: #ffffff !important;
}
/* ----- Orange gradient backgrounds — ensure white text ----- */
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient(135deg, #e67e22"],
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient(135deg,#e67e22"] {
color: #ffffff !important;
}
/* ----- Blue gradient backgrounds (#1a5276) — ensure white text ----- */
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient(135deg, #1a5276"],
html:not(.skin-theme-clientpref-day) [style*="background:linear-gradient(135deg,#1a5276"] {
color: #ffffff !important;
}
}
/* ===== DARK MODE OVERRIDES — Vector 2022 Manual "Dark" Toggle ===== */
/* Fires when user clicks Appearance → Dark in the Vector 2022 menu */
/* Must duplicate all rules from the @media block above because this */
/* class is applied regardless of OS color scheme preference */
html.skin-theme-clientpref-night {
/* ----- FAQ Highlight Box Fix ----- */
.faq-highlight-box,
.faq-highlight-box td,
.faq-highlight-box table {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ----- Infobox Fixes ----- */
.infobox,
.infobox td,
.infobox th {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
.infobox th[style*="background:#1a5276"],
.infobox td[style*="background:#1a5276"] {
background-color: #1a5276 !important;
color: #ffffff !important;
}
/* Light gray backgrounds */
td[style*="background:#f8f9fa"],
td[style*="background: #f8f9fa"],
div[style*="background:#f8f9fa"],
[style*="background:#f8f9fa"] {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* Light blue backgrounds */
td[style*="background:#e8f4f8"],
[style*="background:#e8f4f8"] {
background-color: #1a3a4a !important;
color: #e0e0e0 !important;
}
/* ----- Alert/Callout Box Fixes ----- */
[style*="background:#fff3cd"],
div[style*="background:#fff3cd"],
td[style*="background:#fff3cd"] {
background-color: #4a3f00 !important;
border-color: #ffc107 !important;
}
[style*="color:#856404"],
td[style*="color:#856404"],
div[style*="color:#856404"] {
color: #ffd54f !important;
}
[style*="background:#d4edda"],
div[style*="background:#d4edda"],
td[style*="background:#d4edda"] {
background-color: #1a3d1a !important;
border-color: #28a745 !important;
}
[style*="color:#155724"],
td[style*="color:#155724"],
div[style*="color:#155724"] {
color: #81c784 !important;
}
[style*="background:#cce5ff"],
div[style*="background:#cce5ff"],
td[style*="background:#cce5ff"] {
background-color: #1a3a5c !important;
border-color: #007bff !important;
}
[style*="color:#004085"],
td[style*="color:#004085"],
div[style*="color:#004085"] {
color: #90caf9 !important;
}
/* ----- Wikitable Fixes ----- */
.wikitable {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
.wikitable td,
.wikitable th {
border-color: #444 !important;
}
.wikitable th[style*="background:#1a5276"],
th[style*="background:#1a5276"] {
background-color: #1a5276 !important;
color: #ffffff !important;
}
/* ----- Quote Box Fixes ----- */
[style*="background:#f8f9fa"][style*="border-left:4px solid #1a5276"],
div[style*="background:#f8f9fa"][style*="border-left"] {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ----- White Background Override ----- */
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:white"],
[style*="background: white"] {
background-color: #1e1e1e !important;
}
/* ----- Border Color Fixes ----- */
[style*="border-bottom:1px solid #dee2e6"] {
border-bottom-color: #444 !important;
}
/* ----- General Text Visibility ----- */
[style*="color:#212529"],
[style*="color: #212529"],
[style*="color:black"],
[style*="color: black"] {
color: #e0e0e0 !important;
}
[style*="color:#666"] {
color: #a0a0a0 !important;
}
/* ----- Danger/Error boxes (red) ----- */
[style*="background:#f8d7da"],
div[style*="background:#f8d7da"],
td[style*="background:#f8d7da"] {
background-color: #4a1a1a !important;
border-color: #dc3545 !important;
}
[style*="color:#721c24"],
td[style*="color:#721c24"],
div[style*="color:#721c24"] {
color: #f5a0a0 !important;
}
/* ----- Navy/Dark blue backgrounds ----- */
[style*="background:#1a365d"],
div[style*="background:#1a365d"] {
background-color: #1a365d !important;
color: #ffffff !important;
}
/* ----- Gradient backgrounds ----- */
[style*="background:linear-gradient"] {
color: #ffffff !important;
}
[style*="background:linear-gradient(135deg, #ff6b35"] {
color: #ffffff !important;
}
[style*="background:linear-gradient(135deg, #ff6b35"] span {
color: #ffffff !important;
}
/* ----- Light colored text that needs darkening ----- */
[style*="color:#e8f4f8"],
[style*="color:#e2e8f0"] {
color: #b0d0e0 !important;
}
[style*="color:#2980b9"] {
color: #5dade2 !important;
}
/* ----- Dark gray body text — most common uncovered value (502 occurrences) ----- */
[style*="color:#333333"],
[style*="color:#333"] {
color: #e0e0e0 !important;
}
/* ----- Dark navy text (#1a5276) ----- */
[style*="color:#1a5276"] {
color: #5dade2 !important;
}
/* ----- Dark green text (#1a7431) ----- */
[style*="color:#1a7431"] {
color: #81c784 !important;
}
/* ----- Dark orange text (#d35400) ----- */
[style*="color:#d35400"] {
color: #ffaa66 !important;
}
/* ----- Light blue-gray section backgrounds ----- */
[style*="background:#f0f4f8"],
[style*="background:#f0f4f7"],
[style*="background:#eaf2f8"],
[style*="background:#e8eef7"] {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ----- Orange CTA backgrounds (#e67e22) — ensure text legibility ----- */
[style*="background:#e67e22"] {
color: #ffffff !important;
}
/* ----- Orange gradient backgrounds — ensure white text ----- */
[style*="background:linear-gradient(135deg, #e67e22"],
[style*="background:linear-gradient(135deg,#e67e22"] {
color: #ffffff !important;
}
/* ----- Blue gradient backgrounds (#1a5276) — ensure white text ----- */
[style*="background:linear-gradient(135deg, #1a5276"],
[style*="background:linear-gradient(135deg,#1a5276"] {
color: #ffffff !important;
}
}
/* ===== FAQ DARK MODE — FLAT FALLBACK (browser compatibility) ===== */
/* Non-nested equivalents of the rules above. Some browsers handle CSS nesting */
/* inside @media or .class blocks unreliably. These flat selectors always work. */
@media (prefers-color-scheme: dark) {
html:not(.skin-theme-clientpref-day) .faq-highlight-box { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
html:not(.skin-theme-clientpref-day) .faq-highlight-box td { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
html:not(.skin-theme-clientpref-day) .faq-highlight-box table { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
}
html.skin-theme-clientpref-night .faq-highlight-box,
html.skin-theme-clientpref-night .faq-highlight-box td,
html.skin-theme-clientpref-night .faq-highlight-box table {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
/* ===== MOBILE RESPONSIVE FIXES ===== */
/* On narrow screens, stop floating infoboxes so body text isn't crushed */
@media (max-width: 600px) {
.infobox {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 1em 0 !important;
}
}
/* ===== SECTION FLOAT CLEARING — MW 1.40+ COMPATIBILITY ===== */
/* MW 1.40+ replaced bare <h2> with <div class="mw-heading2"><h2>. The new div */
/* uses display:flow-root instead of clear:both, so infobox floats bleed across */
/* H2 section boundaries. This restores traditional MediaWiki section behavior. */
.mw-heading2 {
clear: both;
}