MediaWiki:Common.css: Difference between revisions

/* 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 ----- */
    .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;
    }
}

/* ===== 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 {
        background-color: var(--color-surface-2, #2a2a2a) !important;
        color: var(--color-base, #e0e0e0) !important;
    }

    /* ----- Infobox Fixes ----- */
    .infobox,
    .infobox td,
    .infobox th {
        background-color: var(--color-surface-1, #1e1e1e) !important;
        color: var(--color-base, #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: 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 ----- */

    [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: var(--color-surface-1, #1e1e1e) !important;
        color: var(--color-base, #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: var(--color-surface-1, #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: var(--color-base, #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;
    }
}

/* ===== 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;
    }
}