MediaWiki:Common.css: Difference between revisions

Revision as of 15:45, 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;
}








/* Target the drawer card specifically */
#citizen-drawer__card {
    /* Your deep black-blue: rgb(3, 7, 30) */
    background: rgb(3, 7, 30) !important;
    
    /* Remove the frosted glass if it makes the blue look muddy */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    
    /* Add a subtle orange border to match your fire theme */
    border: 1px solid rgba(232, 93, 4, 0.3) !important;
}

/* Ensure the stats (Articles, Edits, etc.) are readable */
.citizen-siteStats__item {
    color: #cbd5e0 !important;
}

/* Make the icons in the stats match your fire accent */
.citizen-siteStats__item .citizen-ui-icon {
    background-color: rgb(232, 93, 4) !important;
}