MediaWiki:Citizen.css: Difference between revisions

Revision as of 21:12, 4 February 2025

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

.aylhrhead {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;  /* Makes container span full viewport width */
    max-width: 100%;
    height: auto; 
    background: none !important;
    padding: 0;
}

.aylhrhead img {
    width: 100%;  /* Ensures the image fills the container */
    max-width: 100%;
    height: auto;
    background: none !important;
    object-fit: contain; /* Keeps aspect ratio */
}