MediaWiki:Citizen.css: Difference between revisions

Revision as of 19:47, 4 February 2025

:root.skin-theme-clientpref-night {
    /* Restore primary color so buttons do NOT break */
    --color-primary__h: 220;  /* Set primary color back to blue hue */
    --color-primary__s: 60%;  /* Restore saturation */
    --color-primary__l: 50%;  /* Restore lightness */

    /* 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 */

    /* Restore button colors */
    --color-primary: #444444; /* Dark gray for button background */
    --color-primary--hover: #555555; /* Slightly lighter hover color */
    --color-primary--active: #666666; /* Clicked button color */
    --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: #444444 !important; /* Dark gray button background */
    color: #ffffff !important; /* White text */
    border: 1px solid #555555 !important; /* Subtle border */
}

.mw-editbutton:hover,
.mw-ui-button:hover,
#ca-edit a:hover,
#ca-ve-edit a:hover {
    background-color: #555555 !important; /* Slightly lighter on hover */
}

.mw-editbutton:active,
.mw-ui-button:active,
#ca-edit a:active,
#ca-ve-edit a:active {
    background-color: #666666 !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: #444444 !important; /* Dark button background */
    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 #555555 !important; /* Subtle border */
}

input:focus,
textarea:focus,
select:focus {
    background-color: #333333 !important; /* Slightly lighter on focus */
    border-color: #66ff66 !important; /* 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 */
}