MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

:root.skin-theme-clientpref-night {
    /* Restore primary color so buttons do NOT break */
    --color-primary__h: 150;  /* Green hue */
    --color-primary__s: 50%;  /* Medium saturation */
    --color-primary__l: 30%;  /* Darker lightness for deep green */

    /* Ensure text is white */
    --color-base: #ffffff; /* Main text color */
    --color-emphasized: #f5f5f5; /* Emphasized text (headers) */
    --color-subtle: #cccccc; /* Less important text */

    /* Dark background */
    --color-surface-0: #121212; /* Page background */
    --color-surface-1: #1a1a1a; /* Panels, dropdowns */
    --color-surface-2: #222222; /* Secondary elements */
    --color-surface-3: #2a2a2a; /* Deep layers */
    --color-surface-4: #333333; /* Borders and deepest layers */

    /* Dark Green Buttons */
    --color-primary: #1d4f2d; /* Dark emerald green */
    --color-primary--hover: #23713e; /* Slightly lighter green */
    --color-primary--active: #2a8c50; /* Even lighter when clicked */
    --color-primary-text: #ffffff; /* Ensure button text is white */

    /* UI buttons and accents */
    --color-syntax-red: #ff6666; /* Error text */
    --color-syntax-blue: #6699ff; /* Other blue UI elements */
    --color-syntax-green: #66ff66; /* Success messages */
}

/* ---- Fix Green Links (Non-existent Pages) to Red ---- */
.mw-parser-output a.new {
    color: #ff6666 !important; /* Change non-existent page links to red */
}

.mw-parser-output a.new:hover {
    color: #ff3333 !important; /* Darker red when hovered */
}

/* ---- Force Normal Links to be Green ---- */
.mw-parser-output a {
    color: #66ff66 !important; /* Default link color */
    text-decoration: none;
}

.mw-parser-output a:hover {
    color: #44cc44 !important; /* Hovered link color */
    text-decoration: underline;
}

.mw-parser-output a:active {
    color: #33aa33 !important; /* Clicked link color */
}

/* ---- COMPLETELY FIX EDIT BUTTON ---- */
.mw-editbutton,
.mw-ui-button,
#ca-edit a,
#ca-ve-edit a {
    background-color: #1d4f2d !important; /* Dark emerald green */
    color: #ffffff !important; /* White text */
    border: 1px solid #23713e !important; /* Slightly lighter green border */
}

.mw-editbutton:hover,
.mw-ui-button:hover,
#ca-edit a:hover,
#ca-ve-edit a:hover {
    background-color: #23713e !important; /* Lighter emerald green on hover */
}

.mw-editbutton:active,
.mw-ui-button:active,
#ca-edit a:active,
#ca-ve-edit a:active {
    background-color: #2a8c50 !important; /* Even lighter when clicked */
}

/* ---- Fix White Background Issue on All Buttons ---- */
.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive) {
    background-color: #1d4f2d !important; /* Dark emerald green */
    color: #ffffff !important; /* White text */
}

/* ---- Fix Checkboxes and Radio Buttons Visibility ---- */
input[type="checkbox"],
input[type="radio"] {
    filter: invert(100%); /* Make them visible on dark background */
}

/* ---- Fix Form Inputs & Dropdowns ---- */
input,
textarea,
select {
    background-color: #222222 !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #23713e !important; /* Green border for focus */
}

input:focus,
textarea:focus,
select:focus {
    background-color: #333333 !important; /* Slightly lighter on focus */
    border-color: #66ff66 !important; /* Bright green border for focus */
}

/* ---- Fix the "Create Page" Button (For Missing Pages) ---- */
.mw-ui-button.mw-ui-progressive {
    background-color: #ff6666 !important; /* Red background for missing page buttons */
    color: #ffffff !important; /* White text */
    border: 1px solid #aa4444 !important;
}

.mw-ui-button.mw-ui-progressive:hover {
    background-color: #ff3333 !important; /* Darker red on hover */
}

/* Header Image Responsive Fix */

.res-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
}