MediaWiki:Common.css: Difference between revisions

Revision as of 23:19, 10 March 2026

/*
 * Menhirs Fate Wiki - Citizen Skin Customization v4
 * Fixes: light mode, image sizing, nation grid
 */

/* ─── DARK MODE (default, matches EazyDocs) ────────────────────────────────── */
html.skin-citizen-dark,
html[data-citizen-theme="dark"],
.skin-citizen {
    --color-surface-0: #111111;
    --color-surface-1: #161618;
    --color-surface-2: #1c1c1f;
    --color-surface-3: #242427;
    --color-surface-4: #2c303a;
    --color-base: #eaeaea;
    --color-base--emphasized: #f6f6f6;
    --color-base--subtle: #9daab6;
    --color-primary: #844725;
    --color-primary--hover: #a0603a;
    --color-primary--active: #6b3a1f;
    --color-link: #d4b896;
    --color-link--hover: #e8d0b0;
    --color-link--active: #c4a070;
    --color-link-new: #e06060;
    --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 — parchment theme ─────────────────────────────────────────── */
html[data-citizen-theme="light"],
html.skin-citizen-light {
    --color-surface-0: #f5f0e8 !important;
    --color-surface-1: #ebe5da !important;
    --color-surface-2: #e0d8cc !important;
    --color-surface-3: #d4c9b8 !important;
    --color-surface-4: #c8bca4 !important;
    --color-base: #1a1a1e !important;
    --color-base--emphasized: #111111 !important;
    --color-base--subtle: #555555 !important;
    --color-primary: #844725 !important;
    --color-primary--hover: #a0603a !important;
    --color-primary--active: #6b3a1f !important;
    --color-link: #6b3a1f !important;
    --color-link--hover: #844725 !important;
    --color-link--active: #4a2810 !important;
    --color-link-new: #cc3333 !important;
}

/* Force light mode backgrounds on body/main surfaces */
html[data-citizen-theme="light"] body,
html[data-citizen-theme="light"] .citizen-body,
html[data-citizen-theme="light"] .citizen-header,
html[data-citizen-theme="light"] .citizen-footer {
    background-color: #f5f0e8 !important;
    color: #1a1a1e !important;
}
html[data-citizen-theme="light"] .citizen-drawer__card {
    background-color: #ebe5da !important;
}
html[data-citizen-theme="light"] .citizen-drawer__menu a {
    color: #1a1a1e !important;
}
html[data-citizen-theme="light"] .citizen-drawer__menu a:hover {
    color: #844725 !important;
}
html[data-citizen-theme="light"] .mw-heading h2,
html[data-citizen-theme="light"] .mw-body-content h2,
html[data-citizen-theme="light"] #mw-content-text h2 {
    color: #844725 !important;
    border-bottom-color: #844725;
}
html[data-citizen-theme="light"] .mw-heading h3,
html[data-citizen-theme="light"] .mw-body-content h3 {
    color: #844725 !important;
}
html[data-citizen-theme="light"] .wikitable {
    background-color: #ebe5da;
    color: #1a1a1e;
    border-color: #c8bca4;
}
html[data-citizen-theme="light"] .wikitable th {
    background-color: rgba(132, 71, 37, 0.15);
    color: #1a1a1e;
    border-color: #c8bca4;
}
html[data-citizen-theme="light"] .wikitable td {
    border-color: #c8bca4;
}
html[data-citizen-theme="light"] .citizen-toc a {
    color: #555 !important;
}
html[data-citizen-theme="light"] .citizen-toc a:hover {
    color: #844725 !important;
}
html[data-citizen-theme="light"] .citizen-toc .citizen-toc__link--active {
    color: #844725 !important;
}
html[data-citizen-theme="light"] .citizen-search__card {
    background-color: #ebe5da !important;
}
html[data-citizen-theme="light"] .citizen-search input {
    color: #1a1a1e !important;
}
html[data-citizen-theme="light"] .citizen-search input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}
html[data-citizen-theme="light"] .infobox {
    background-color: #ebe5da;
}
html[data-citizen-theme="light"] .infobox th {
    color: #1a1a1e;
}

/* ─── HEADINGS (brown accent) ──────────────────────────────────────────────── */
.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 ─────────────────────────────────────────────────────────────── */
.mw-body-content p, .mw-body-content li, .mw-body-content dd {
    font-size: 1.05rem;
    line-height: 1.9;
}

/* ─── IMAGE SIZING — constrain external images ─────────────────────────────── */
.mw-body-content img:not(.mw-file-element):not([class*="citizen"]):not([class*="oo-ui"]) {
    max-width: 350px;
    max-height: 450px;
    height: auto;
    width: auto;
    object-fit: cover;
    border-radius: 6px;
    float: right;
    margin: 0 0 1em 1.5em;
}

/* Images inside gallery or grid should not float */
.mw-body-content .nation-grid img,
.mw-body-content .gallery img {
    float: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
}

/* ─── NATION IMAGE GRID ────────────────────────────────────────────────────── */
.nation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 1.5em 0;
    max-width: 900px;
}
.nation-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 2/3;
    background: #1c1c1f;
}
.nation-grid-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    position: relative;
}
.nation-grid-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    max-width: none !important;
    max-height: none !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.nation-grid-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.8);
}
.nation-grid-item .nation-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #f6f6f6;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 600px) {
    .nation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── 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 ────────────────────────────────────────────────────── */
.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 ───────────────────────────────────────────────────────────────── */
.citizen-search__card {
    border-radius: 20px;
    overflow: hidden;
}
.citizen-search input {
    color: #f8f8f8;
}
.citizen-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.citizen-typeahead-option--active,
.citizen-typeahead-option:hover {
    background-color: rgba(212, 184, 150, 0.1) !important;
}

/* ─── WIKITABLE ────────────────────────────────────────────────────────────── */
.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 ──────────────────────────────────────────────────────────────── */
.cdx-button--action-progressive {
    --cdx-color-progressive: #844725;
    --cdx-color-progressive--hover: #a0603a;
    --cdx-color-progressive--active: #6b3a1f;
}

/* ─── RED LINKS ────────────────────────────────────────────────────────────── */
.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; }
    .mw-body-content img:not(.mw-file-element):not([class*="citizen"]):not([class*="oo-ui"]) {
        float: none;
        display: block;
        margin: 1em auto !important;
        max-width: 100%;
    }
}