Module:Hatnote/styles.css

/**
 * Module:Hatnote/styles.css
 * TemplateStyles for hatnotes, disambiguation, and navigation templates.
 *
 * INSTALLATION:
 * 1. Create page: Module:Hatnote/styles.css
 * 2. Paste this entire file
 * 3. Mark as sanitized CSS (Content model: Sanitized CSS)
 *
 * DARK MODE:
 * Uses [data-theme="dark"] selector to match wiki's dark mode toggle.
 */

/* ==========================================================================
   BASE HATNOTE
   ========================================================================== */

.hatnote {
    font-size: 0.9em;
    font-style: italic;
    padding: 0.3em 1.6em;
    margin-bottom: 0.5em;
    color: #54595d;
}

.hatnote a {
    color: #36c;
}

.hatnote a:visited {
    color: #795cb2;
}

/* ==========================================================================
   BOXED HATNOTES (Main, See also, Further)
   ========================================================================== */

.hatnote-main,
.hatnote-seealso,
.hatnote-further {
    padding: 0.4em 0.8em;
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    font-style: normal;
}

/* ==========================================================================
   REDIRECT HATNOTE
   ========================================================================== */

.hatnote-redirect {
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #a2a9b1;
}

/* ==========================================================================
   DISTINGUISH HATNOTE
   ========================================================================== */

.hatnote-distinguish {
    /* Uses default hatnote styling */
}

/* ==========================================================================
   OTHER USES HATNOTE
   ========================================================================== */

.hatnote-otheruses {
    /* Uses default hatnote styling */
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .hatnote {
    color: #a2a9b1;
}

[data-theme="dark"] .hatnote a {
    color: #6b9eff;
}

[data-theme="dark"] .hatnote a:visited {
    color: #b695e0;
}

[data-theme="dark"] .hatnote-main,
[data-theme="dark"] .hatnote-seealso,
[data-theme="dark"] .hatnote-further {
    background-color: #27292d;
    border-color: #72777d;
}

[data-theme="dark"] .hatnote-redirect {
    border-bottom-color: #72777d;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .hatnote {
        color: #000;
        font-style: italic;
    }

    .hatnote-main,
    .hatnote-seealso,
    .hatnote-further {
        background-color: #fff;
        border-color: #000;
    }

    .hatnote-redirect {
        border-bottom-color: #000;
    }
}