MediaWiki:Citizen.css: verschil tussen versies

Versie van 5 dec 2025 20:15

/* ===============================================
   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: #FFF;        /* Text color */
    --text-lighter: #E0D4C8;        /* Text color */
    --color-base: #E0D4C8;        /* Text color */
    --color-subtle: #E0D4C8;        /* Text color */

    --color-orange: orange;

    /* Secretway variables */
    --main-bg-color: #5D4141;
    --main-bg-color-transparent: rgb(93, 65, 65, .9);
    --secondary-bg-color: #3E1C00;
    --secondary-bg-color-transparent: rgba(62, 28, 0, .9);
    --tertiarty-bg-color: #3F2D2D;
    --4th-bg-color: transparent;
    /*--4th-bg-color: #493434;*/
    --list-primary-color: #3F2D2D;
    --list-secondary-color: #493434;
    /*--list-secondary-color: rgba(63, 45, 45, 0.7);*/
    --button-secondary-bg-color-transparent: rgba(63, 45, 45, 1);
    --button-tertiary-bg-color-transparent: rgba(63, 45, 45, .8);
    --dark-border-color: rgba(62, 28, 0, .2);
}

/* ---------- PAGE BACKGROUND ---------- */
body,
.skin-citizen {
    background: var(--button-secondary-bg-color-transparent) !important;
    color: var(--text-light) !important;
}

/* ---------- CONTENT BOX ---------- */
#content,
.mw-body {
    background: var(--main-bg-color) !important;
    color: var(--text-light) !important;
}

#bodyContent {
    padding: 0 20px;
}

.citizen-body {
    background: var(--main-bg-color) !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(--secondary-bg-color-transparent) !important;
    border-bottom: 2px solid var(--button-secondary-bg-color-transparent) !important;
    color: var(--text-light) !important;
}

.citizen-sticky-header-background {
    background: var(--secondary-bg-color-transparent) !important;
}

.citizen-command-palette {
    background: var(--main-bg-color) !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(--secondary-bg-color-transparent) !important;
    border-bottom: 2px solid var(--button-secondary-bg-color-transparent) !important;
}
.citizen-page-header h1,
.citizen-page-header h2,
.citizen-page-header h3 {
    color: var(--text-light) !important;
}

/* ---------- LINKS ---------- */
a {
    color: var(--text-light) !important;
}
a:hover {
    color: var(--color-orange) !important;  /* licht gouden highlight */
}

#ca-edit > a, #ca-ve-edit > a {
    background: rgba(0,0,0,.2);
}

#footer-icons a {
    background-color: transparent;
    border: 0;
}

/* ---------- 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(--button-secondary-bg-color-transparent) !important;
    color: var(--text-light) !important;
}

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