MediaWiki:Citizen.css

Opmerking: na het publiceren moet je misschien je browsercache legen om de veranderingen te zien.

• Firefox / Safari: houd Shift ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
• Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
• Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.

/* Alle hier geplaatste CSS-code wordt geladen voor gebruikers van de vormgeving Citizen */
/* ===============================================
   CITIZEN BROWN THEME — BASE COLOR #3e1c00
   =============================================== */

/* ---------- GLOBAL COLORS ---------- */
:root {
    --brown-dark: #1e0e00;
    --brown-base: #3e1c00;
    --brown-light: #60320a;
    --brown-soft: #8a5a2e;

    --accent-gold: #d9a35a;
    --accent-gold-light: #f1c98a;

    --text-light: #f5ebdd;
    --text-muted: #d2c3b2;
}

/* ---------- 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-light) !important;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,.55);
}

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

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

/* ---------- PAGE TITLES ---------- */
.citizen-page-header {
    background: var(--brown-light) !important;
    border-bottom: 2px solid var(--brown-base) !important;
}

.citizen-page-header h1 {
    color: var(--accent-gold) !important;
}

/* ---------- LINKS ---------- */
a {
    color: var(--accent-gold) !important;
}
a:hover {
    color: var(--accent-gold-light) !important;
}

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

/* ---------- NAVMENUS / DROPDOWNS ---------- */
.vector-menu-content,
.citizen-menu,
.citizen-menu-dropdown {
    background: var(--brown-base) !important;
    border: 1px solid var(--brown-soft) !important;
}

/* ---------- INPUTS / SEARCH ---------- */
input,
textarea,
select {
    background: var(--brown-dark) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--brown-soft) !important;
}
input:focus,
textarea:focus {
    border-color: var(--accent-gold) !important;
}

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

/* ---------- FOOTER ---------- */
.citizen-footer,
.citizen-footer-container {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
}

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