MediaWiki:Citizen.css: verschil tussen versies

Versie van 5 dec 2025 19:40

/* ===============================================
   CUSTOM BROWN THEME — GAME-INSPIRED
   =============================================== */

/* ---------- GLOBAL COLORS ---------- */
:root {
    --brown-dark: #3E2A24;        /* Footer / deep background */
    --brown-base: #5B3A2E;        /* Main content */
    --brown-accent: #8B5E3C;      /* Headers / highlights */
    --text-light: #E0D4C8;        /* Text color */
}

/* ---------- PAGE BACKGROUND ---------- */
body,
.skin-citizen {
    background: var(--brown-dark) !important;
    color: var(--text-light) !important;
}

/* ---------- CONTENT BOX ---------- */
.citizen-body,
#content,
.mw-body {
    background: var(--brown-base) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--brown-accent) !important;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
}

/* ---------- HEADER & NAVBAR ---------- */
.citizen-header,
.citizen-header-container {
    background: var(--brown-accent) !important;
    border-bottom: 2px solid var(--brown-dark) !important;
    color: var(--text-light) !important;
}

/* ---------- SIDEBAR ---------- */
.citizen-sidebar,
.citizen-sidebar-portlet {
    background: var(--brown-base) !important;
    border: 1px solid var(--brown-accent) !important;
    border-radius: 6px;
    color: var(--text-light) !important;
}

/* ---------- PAGE TITLES ---------- */
.citizen-page-header {
    background: var(--brown-accent) !important;
    border-bottom: 2px solid var(--brown-dark) !important;
}
.citizen-page-header h1,
.citizen-page-header h2,
.citizen-page-header h3 {
    color: var(--text-light) !important;
}

/* ---------- LINKS ---------- */
a {
    color: var(--brown-accent) !important;
}
a:hover {
    color: #C79A6E !important;  /* licht gouden highlight */
}

/* ---------- TABLES ---------- */
table {
    background-color: var(--brown-base) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--brown-accent) !important;
}
th {
    background: var(--brown-accent) !important;
}
tr:nth-child(even) {
    background: #4F2F26 !important; /* subtiele afwisseling */
}

/* ---------- BUTTONS ---------- */
button,
.citizen-button,
.mw-htmlform-submit {
    background: var(--brown-accent) !important;
    color: var(--text-light) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
}
button:hover,
.citizen-button:hover {
    background: #C79A6E !important;  /* licht gouden hover */
}

/* ---------- FOOTER ---------- */
.citizen-footer,
.citizen-footer-container {
    background: var(--brown-dark) !important;
    color: var(--text-light) !important;
}

/* ---------- CUSTOM FOOTER LOGO ---------- */
.my-footer-logo img {
    height: 40px;
    background: transparent !important;
    margin: 10px auto;
    display: block;
}