MediaWiki:Common.css - Revision history

MesotheliomaSupport: Revert .mw-heading2 clear:both — too aggressive, pushed Executive Summary below infobox; fixing via wikitext instead (RON #9543)

2026-05-26T14:45:48Z

Revert .mw-heading2 clear:both — too aggressive, pushed Executive Summary below infobox; fixing via wikitext instead (RON #9543)

@@ Line 510: / Line 510: @@
          margin: 0 0 1em 0 !important;
+     }
+}

MesotheliomaSupport: Add .mw-heading2 clear:both — MW 1.40+ broke H2 float clearing (mw-heading div uses flow-root not clear); restores traditional section behavior (RON #9543)

2026-05-26T14:41:46Z

Add .mw-heading2 clear:both — MW 1.40+ broke H2 float clearing (mw-heading div uses flow-root not clear); restores traditional section behavior (RON #9543)

@@ Line 510: / Line 510: @@
          margin: 0 0 1em 0 !important;
+     }
+}

MesotheliomaSupport: Dark mode v2 (RON #9229): replace var(--color-base) with literal hex, add :not(.skin-theme-clientpref-day) guard to all @media block rules

2026-05-25T05:44:04Z

Dark mode v2 (RON #9229): replace var(--color-base) with literal hex, add :not(.skin-theme-clientpref-day) guard to all @media block rules

Show changes

MesotheliomaSupport: Dark mode patch: cover color:#333, #1a5276, #1a7431, #d35400, light blue-gray backgrounds, gradient text (RON #9207)

2026-05-25T04:59:45Z

Dark mode patch: cover color:#333, #1a5276, #1a7431, #d35400, light blue-gray backgrounds, gradient text (RON #9207)

Show changes

MesotheliomaSupport: Fix dark mode: replace CSS vars with hardcoded hex, add flat fallbacks

2026-04-24T13:31:55Z

Fix dark mode: replace CSS vars with hardcoded hex, add flat fallbacks

← Older revision		Revision as of 13:31, 24 April 2026
Line 29:		Line 29:
	.infobox td,		.infobox td,
	.infobox th {		.infobox th {
	background-color: ~~var(--color-surface-1,~~ #1e1e1e) !important;		background-color: #1e1e1e !important;
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 45:		Line 45:
	div[style*="background:#f8f9fa"],		div[style*="background:#f8f9fa"],
	[style*="background:#f8f9fa"] {		[style*="background:#f8f9fa"] {
	background-color: ~~var(--color-surface-2,~~ #2a2a2a) !important;		background-color: #2a2a2a !important;
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 105:		Line 105:
	/* ----- Wikitable Fixes ----- */		/* ----- Wikitable Fixes ----- */
	.wikitable {		.wikitable {
	background-color: ~~var(--color-surface-1,~~ #1e1e1e) !important;		background-color: #1e1e1e !important;
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 134:		Line 134:
	[style*="background:white"],		[style*="background:white"],
	[style*="background: white"] {		[style*="background: white"] {
	background-color: ~~var(--color-surface-1,~~ #1e1e1e) !important;		background-color: #1e1e1e !important;
	}		}

Line 148:		Line 148:
	[style*="color:black"],		[style*="color:black"],
	[style*="color: black"] {		[style*="color: black"] {
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 224:		Line 224:
	.infobox td,		.infobox td,
	.infobox th {		.infobox th {
	background-color: ~~var(--color-surface-1,~~ #1e1e1e) !important;		background-color: #1e1e1e !important;
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 239:		Line 239:
	div[style*="background:#f8f9fa"],		div[style*="background:#f8f9fa"],
	[style*="background:#f8f9fa"] {		[style*="background:#f8f9fa"] {
	background-color: ~~var(--color-surface-2,~~ #2a2a2a) !important;		background-color: #2a2a2a !important;
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 293:		Line 293:
	/* ----- Wikitable Fixes ----- */		/* ----- Wikitable Fixes ----- */
	.wikitable {		.wikitable {
	background-color: ~~var(--color-surface-1,~~ #1e1e1e) !important;		background-color: #1e1e1e !important;
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 320:		Line 320:
	[style*="background:white"],		[style*="background:white"],
	[style*="background: white"] {		[style*="background: white"] {
	background-color: ~~var(--color-surface-1,~~ #1e1e1e) !important;		background-color: #1e1e1e !important;
	}		}

Line 333:		Line 333:
	[style*="color:black"],		[style*="color:black"],
	[style*="color: black"] {		[style*="color: black"] {
	color: ~~var(--color-base,~~ #e0e0e0) !important;		color: #e0e0e0 !important;
	}		}

Line 402:		Line 402:
	}		}


			/* ===== INFOBOX + WIKITABLE DARK MODE — FLAT FALLBACKS (browser compatibility) ===== */
			@media (prefers-color-scheme: dark) {
			.infobox { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
			.infobox td { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
			.infobox th { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
			.wikitable { background-color: #1e1e1e !important; color: #e0e0e0 !important; }
			.wikitable td { background-color: #1e1e1e !important; }
			.wikitable th { background-color: #1e1e1e !important; }
			}

			html.skin-theme-clientpref-night .infobox,
			html.skin-theme-clientpref-night .infobox td,
			html.skin-theme-clientpref-night .infobox th {
			background-color: #1e1e1e !important;
			color: #e0e0e0 !important;
			}

			html.skin-theme-clientpref-night .wikitable,
			html.skin-theme-clientpref-night .wikitable td,
			html.skin-theme-clientpref-night .wikitable th {
			background-color: #1e1e1e !important;
			color: #e0e0e0 !important;
			}
	/* ===== MOBILE RESPONSIVE FIXES ===== */		/* ===== MOBILE RESPONSIVE FIXES ===== */
	/* On narrow screens, stop floating infoboxes so body text isn't crushed */		/* On narrow screens, stop floating infoboxes so body text isn't crushed */

Wikamo: Fix dark mode FAQ highlight box: hardcode colors, add table selector, flat fallback (RON-diagnosed)

2026-04-19T16:01:15Z

Fix dark mode FAQ highlight box: hardcode colors, add table selector, flat fallback (RON-diagnosed)

← Older revision		Revision as of 16:01, 19 April 2026
Line 18:		Line 18:
	/* ----- FAQ Highlight Box Fix ----- */		/* ----- FAQ Highlight Box Fix ----- */
	.faq-highlight-box,		.faq-highlight-box,
	.faq-highlight-box td {		.faq-highlight-box td,
	background-color: ~~var(--color-surface-2,~~ #2a2a2a) !important;		.faq-highlight-box table {
	color: ~~var(--color-base,~~ #e0e0e0) !important;		background-color: #2a2a2a !important;
			color: #e0e0e0 !important;
	}		}

Line 213:		Line 214:
	/* ----- FAQ Highlight Box Fix ----- */		/* ----- FAQ Highlight Box Fix ----- */
	.faq-highlight-box,		.faq-highlight-box,
	.faq-highlight-box td {		.faq-highlight-box td,
	background-color: ~~var(--color-surface-2,~~ #2a2a2a) !important;		.faq-highlight-box table {
	color: ~~var(--color-base,~~ #e0e0e0) !important;		background-color: #2a2a2a !important;
			color: #e0e0e0 !important;
	}		}

Line 381:		Line 383:
	color: #5dade2 !important;		color: #5dade2 !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) {
			.faq-highlight-box { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
			.faq-highlight-box td { background-color: #2a2a2a !important; color: #e0e0e0 !important; }
			.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;
	}		}

Wikamo: Fix dark mode: replace dead Citizen skin rules with Vector 2022 skin-theme-clientpref-night targeting

2026-03-18T02:05:21Z

Fix dark mode: replace dead Citizen skin rules with Vector 2022 skin-theme-clientpref-night targeting

Show changes

Wikamo: Add mobile responsive CSS for infoboxes

2026-03-17T23:17:31Z

Add mobile responsive CSS for infoboxes

New page

/* WikiMesothelioma.com - Dark Mode Compatibility CSS */
/* This CSS ensures all inline-styled content remains visible in dark mode */

/* ===== FAQ HIGHLIGHT BOX ===== */
/* Used on Main Page and other highlight boxes */
.faq-highlight-box {
background-color: #f8f9fa;
}

/* ===== DARK MODE OVERRIDES ===== */
/* The Citizen skin uses @media (prefers-color-scheme: dark) for automatic dark mode */

@media (prefers-color-scheme: dark) {

/* ----- FAQ Highlight Box Fix ----- */
.faq-highlight-box,
.faq-highlight-box td {
background-color: var(--color-surface-2, #2a2a2a) !important;
color: var(--color-base, #e0e0e0) !important;
}

/* ----- Infobox Fixes ----- */
/* Override white backgrounds that become invisible */
.infobox,
.infobox td,
.infobox th {
background-color: var(--color-surface-1, #1e1e1e) !important;
color: var(--color-base, #e0e0e0) !important;
}

/* Infobox header - keep the blue but ensure text is visible */
.infobox th[style*="background:#1a5276"],
.infobox td[style*="background:#1a5276"] {
background-color: #1a5276 !important;
color: #ffffff !important;
}

/* Light gray backgrounds in infoboxes */
td[style*="background:#f8f9fa"],
td[style*="background: #f8f9fa"],
div[style*="background:#f8f9fa"],
[style*="background:#f8f9fa"] {
background-color: var(--color-surface-2, #2a2a2a) !important;
color: var(--color-base, #e0e0e0) !important;
}

/* Light blue backgrounds */
td[style*="background:#e8f4f8"],
[style*="background:#e8f4f8"] {
background-color: #1a3a4a !important;
color: #e0e0e0 !important;
}

/* ----- Alert/Callout Box Fixes ----- */

/* Warning boxes (yellow) */
[style*="background:#fff3cd"],
div[style*="background:#fff3cd"],
td[style*="background:#fff3cd"] {
background-color: #4a3f00 !important;
border-color: #ffc107 !important;
}

/* Warning text color - was #856404, invisible on dark */
[style*="color:#856404"],
td[style*="color:#856404"],
div[style*="color:#856404"] {
color: #ffd54f !important;
}

/* Success boxes (green) */
[style*="background:#d4edda"],
div[style*="background:#d4edda"],
td[style*="background:#d4edda"] {
background-color: #1a3d1a !important;
border-color: #28a745 !important;
}

/* Success text color - was #155724, invisible on dark */
[style*="color:#155724"],
td[style*="color:#155724"],
div[style*="color:#155724"] {
color: #81c784 !important;
}

/* Info boxes (blue) */
[style*="background:#cce5ff"],
div[style*="background:#cce5ff"],
td[style*="background:#cce5ff"] {
background-color: #1a3a5c !important;
border-color: #007bff !important;
}

/* Info text color */
[style*="color:#004085"],
td[style*="color:#004085"],
div[style*="color:#004085"] {
color: #90caf9 !important;
}

/* ----- Wikitable Fixes ----- */
.wikitable {
background-color: var(--color-surface-1, #1e1e1e) !important;
color: var(--color-base, #e0e0e0) !important;
}

.wikitable td,
.wikitable th {
border-color: #444 !important;
}

/* Table headers with blue background - keep them but ensure contrast */
.wikitable th[style*="background:#1a5276"],
th[style*="background:#1a5276"] {
background-color: #1a5276 !important;
color: #ffffff !important;
}

/* ----- Quote Box Fixes ----- */
/* Quote boxes with light backgrounds */
[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: var(--color-surface-1, #1e1e1e) !important;
}

/* ----- Border Color Fixes ----- */
[style*="border-bottom:1px solid #dee2e6"] {
border-bottom-color: #444 !important;
}

/* ----- General Text Visibility ----- */
/* Ensure any dark text colors become light */
[style*="color:#212529"],
[style*="color: #212529"],
[style*="color:black"],
[style*="color: black"] {
color: var(--color-base, #e0e0e0) !important;
}

/* Gray text - make visible */
[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"] {
/* Gradients generally work in dark mode, but ensure text is visible */
color: #ffffff !important;
}

/* ----- CTA orange button gradient ----- */
[style*="background:linear-gradient(135deg, #ff6b35"] {
/* Keep the orange gradient but ensure white text */
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;
}

/* Blue accent text */
[style*="color:#2980b9"] {
color: #5dade2 !important;
}
}

/* ===== CITIZEN SKIN SPECIFIC FIXES ===== */
/* For Citizen skin's built-in dark mode toggle */

.skin-citizen-dark {
/* Same overrides as above for manual dark mode toggle */

.faq-highlight-box,
.faq-highlight-box td {
background-color: var(--color-surface-2) !important;
color: var(--color-base) !important;
}

.infobox,
.infobox td {
background-color: var(--color-surface-1) !important;
color: var(--color-base) !important;
}

td[style*="background:#f8f9fa"],
[style*="background:#f8f9fa"] {
background-color: var(--color-surface-2) !important;
color: var(--color-base) !important;
}

[style*="background:#fff3cd"] {
background-color: #4a3f00 !important;
}

[style*="color:#856404"] {
color: #ffd54f !important;
}

[style*="background:#d4edda"] {
background-color: #1a3d1a !important;
}

[style*="color:#155724"] {
color: #81c784 !important;
}

[style*="background:#cce5ff"] {
background-color: #1a3a5c !important;
}

[style*="background:#ffffff"],
[style*="background:white"] {
background-color: var(--color-surface-1) !important;
}

/* Gray text */
[style*="color:#666"] {
color: #a0a0a0 !important;
}

/* Danger boxes */
[style*="background:#f8d7da"] {
background-color: #4a1a1a !important;
}

[style*="color:#721c24"] {
color: #f5a0a0 !important;
}

/* Navy backgrounds */
[style*="background:#1a365d"] {
color: #ffffff !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;
}
}