MediaWiki:Common.css: Difference between revisions

Revision as of 23:08, 10 March 2026

/*
 * Menhirs Fate Wiki - Citizen Skin Customization v3
 * Closely matches EazyDocs (menhirsfate.com/wiki) design
 * while retaining full Citizen functionality and accessibility.
 */

/* ─── FONT ─────────────────────────────────────────────────────────────────── */
/* Scala Sans is the EazyDocs font — use a close system fallback */

/* ─── DARK MODE (default, matches EazyDocs) ────────────────────────────────── */
html.skin-citizen-dark,
html[data-citizen-theme="dark"],
.skin-citizen {
    /* Surface colors - matched to EazyDocs #111111 base */
    --color-surface-0: #111111;
    --color-surface-1: #161618;
    --color-surface-2: #1c1c1f;
    --color-surface-3: #242427;
    --color-surface-4: #2c303a;

    /* Text - HIGH CONTRAST for accessibility */
    --color-base: #eaeaea;
    --color-base--emphasized: #f6f6f6;
    --color-base--subtle: #9daab6;

    /* Primary accent - brown from MF brand, used sparingly */
    --color-primary: #844725;
    --color-primary--hover: #a0603a;
    --color-primary--active: #6b3a1f;

    /* Links - warm gold, high contrast on dark bg */
    --color-link: #d4b896;
    --color-link--hover: #e8d0b0;
    --color-link--active: #c4a070;
    --color-link-new: #e06060;

    /* Font - Scala Sans approximation */
    --font-family-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ─── LIGHT MODE ───────────────────────────────────────────────────────────── */
html.skin-citizen-light,
html[data-citizen-theme="light"] {
    --color-surface-0: #f5f0e8;
    --color-surface-1: #ebe5da;
    --color-surface-2: #e0d8cc;
    --color-surface-3: #d4c9b0;
    --color-surface-4: #c8bca4;

    --color-base: #1a1a1e;
    --color-base--emphasized: #111;
    --color-base--subtle: #555;

    --color-primary: #844725;
    --color-primary--hover: #a0603a;

    --color-link: #6b3a1f;
    --color-link--hover: #844725;
}


/* ─── HEADINGS (brown accent — large enough to be readable) ────────────────── */

.mw-page-title-main,
.firstHeading,
#firstHeading {
    color: var(--color-base--emphasized) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mw-heading h2,
.mw-body-content h2,
#mw-content-text h2 {
    color: #844725 !important;
    font-weight: 600;
    font-size: 1.6em;
    border-bottom: 1px solid #844725;
    padding-bottom: 6px;
    margin-top: 1.5em;
}

.mw-heading h3,
.mw-body-content h3,
#mw-content-text h3 {
    color: #844725 !important;
    font-weight: 600;
    font-size: 1.3em;
    margin-top: 1.3em;
}

.mw-heading h4,
.mw-body-content h4 {
    color: #a0603a !important;
    font-weight: 600;
}


/* ─── BODY TEXT — matches EazyDocs sizing ──────────────────────────────────── */

.mw-body-content p,
.mw-body-content li,
.mw-body-content dd {
    font-size: 1.05rem;
    line-height: 1.9;
}


/* ─── DRAWER (left sidebar) ────────────────────────────────────────────────── */

.citizen-drawer__card {
    background-color: #111111;
}

.citizen-drawer__menu a {
    transition: color 0.2s ease, background-color 0.2s ease;
}

.citizen-drawer__menu a:hover {
    color: #d4b896;
}


/* ─── TABLE OF CONTENTS — blue-grey like EazyDocs right sidebar ────────────── */

.citizen-toc a {
    color: #9daab6;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.citizen-toc a:hover {
    color: #d4b896;
}

.citizen-toc .citizen-toc__link--active {
    color: #844725 !important;
    font-weight: 600;
}

.citizen-toc__top a {
    color: #9daab6;
}


/* ─── SEARCH — pill-shaped like EazyDocs filter ────────────────────────────── */

.citizen-search__card {
    border-radius: 20px;
    overflow: hidden;
}

.citizen-search input {
    color: #f8f8f8;
}

.citizen-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Search result hover */
.citizen-typeahead-option--active,
.citizen-typeahead-option:hover {
    background-color: rgba(212, 184, 150, 0.1) !important;
}


/* ─── WIKITABLE — dark theme ──────────────────────────────────────────────── */

.wikitable {
    background-color: #161618;
    color: #eaeaea;
    border: 1px solid #333;
    border-collapse: collapse;
}
.wikitable th {
    background-color: rgba(132, 71, 37, 0.2);
    color: #f6f6f6;
    border: 1px solid #333;
    padding: 10px 12px;
    font-weight: 600;
}
.wikitable td {
    border: 1px solid #333;
    padding: 8px 12px;
}
.wikitable tr:nth-child(even) {
    background-color: #1c1c1f;
}
.wikitable tr:hover {
    background-color: rgba(212, 184, 150, 0.06);
}


/* ─── INFOBOX ─────────────────────────────────────────────────────────────── */

.infobox {
    background-color: #161618;
    border: 1px solid #844725;
    border-radius: 4px;
}
.infobox-title {
    background-color: #844725;
    color: #fff;
    padding: 10px 15px;
    font-size: 1.15em;
    font-weight: 700;
    text-align: center;
}
.infobox th {
    background-color: rgba(132, 71, 37, 0.15);
    color: #ede2c6;
    padding: 6px 12px;
    text-align: right;
    width: 40%;
    font-weight: 600;
}
.infobox td {
    padding: 6px 12px;
}


/* ─── CATEGORY TAGS ───────────────────────────────────────────────────────── */

.mw-category-group h3 {
    color: #844725;
}


/* ─── FOOTER ──────────────────────────────────────────────────────────────── */

.citizen-footer {
    background-color: #111111;
    border-top: 1px solid #242427;
}
.citizen-footer a {
    color: #d4b896;
}
.citizen-footer a:hover {
    color: #e8d0b0;
}


/* ─── EDIT INTERFACE ──────────────────────────────────────────────────────── */

textarea,
.mw-editfont-monospace {
    background-color: #1c1c1f;
    color: #eaeaea;
    border: 1px solid #333;
}


/* ─── BUTTONS — brown brand accent ────────────────────────────────────────── */

.cdx-button--action-progressive {
    --cdx-color-progressive: #844725;
    --cdx-color-progressive--hover: #a0603a;
    --cdx-color-progressive--active: #6b3a1f;
}


/* ─── RED LINKS (missing pages) ───────────────────────────────────────────── */

.mw-body-content a.new {
    color: #e06060 !important;
}


/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .mw-page-title-main,
    .firstHeading {
        font-size: 1.6em !important;
    }
    .infobox {
        float: none !important;
        width: 100% !important;
        margin: 1em 0 !important;
    }
}