|
|
| Regel 1: |
Regel 1: |
| /* 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;
| |
| }
| |
