MediaWiki:Common.css: Difference between revisions

Revision as of 15:42, 26 February 2026

/* Usually: 1=Day, 2=Night, 3=OS. This hides 1 and 3 */
#skin-client-prefs-skin-theme .citizen-client-prefs-radio:nth-child(1),
#skin-client-prefs-skin-theme .citizen-client-prefs-radio:nth-child(2) {
    display: none !important;
}

/* 2. Force the remaining options (Night/Pure Black) to stack or center */
#skin-client-prefs-skin-theme form { 
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* 3. Ensure the 'Pure Black' toggle (if enabled) also stays visible below 'Night' */
#skin-client-prefs-citizen-feature-pure-black {
    margin-top: 10px;
    border-top: 1px solid var(--border-color-base);
    padding-top: 10px;
}

/* DARK MODE: Your Deep Black-Blue branding */
:root.skin-theme-clientpref-night {
    /* Your specific rgb(3, 7, 30) Background */
    --color-surface-0: rgb(3, 7, 30); 
    --color-surface-1: #0a0e24; /* Slightly lighter shade for cards/boxes */
    --color-surface-2: #141831; /* For inputs/search bars */
    
    /* Fire Accent: Based on your rgb(232, 93, 4) */
    --color-progressive-oklch__l: 65.55%;
    --color-progressive-oklch__c: 0.211;
    --color-progressive-oklch__h: 41.5;

    --color-emphasized: #ffffff;
    --color-base: #f2f2f2;
}

/* APPLY YOUR GRADIENT: This applies your specific fire gradient to the top header bar */
.mw-header {
    background: linear-gradient(45deg, rgb(220, 47, 2) 0%, rgb(232, 93, 4) 50%, rgb(250, 163, 7) 100%) !important;
}

/* Fix text color on the gradient header so it stays readable */
.mw-header .cdx-button, .mw-header .citizen-header-links a {
    color: white !important;
}


/* This targets the sidebar drawer specifically */
.citizen-drawer {
    background-color: rgb(3, 7, 30) !important;
    border-right: 1px solid rgba(250, 163, 7, 0.2) !important;
}

/* Optional: Make the "Navigation" header match your fire accent */
.citizen-drawer__menu-label {
    color: rgb(232, 93, 4) !important;
    font-weight: bold;
    text-transform: uppercase;
}