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.

/* All CSS here will be loaded for users of the Citizen skin */
/* ----------------------------------
   MangaDex x Citizen Theme Complete
----------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=League+Spartan:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* Base Typography */
    --font-family-citizen-base: 'Poppins', sans-serif;

	--font-family-citizen-monospace: 'JetBrains Mono', monospace;

    /* Primary MangaDex Orange (OKLCH format) */
    --color-progressive-oklch__l: 70.04%; 
    --color-progressive-oklch__c: 0.1935; 
    --color-progressive-oklch__h: 35.4;
    
    /* System Status Overrides */
    --color-destructive: #FF4040;
    --color-success: #04D000;
    --color-warning: #DA7500;
}

h1, h2, h3, h4, h5, h6, .mw-body .firstHeading {
    font-family: 'League Spartan', 'Spartan', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.02em; /* Tightens the headers slightly, matching the MD vibe */
}

/* --- MangaDex Light Mode --- */
.skin-theme-clientpref-day {
    /* Backgrounds & Depth */
    --color-surface-0: #FFFFFF; /* Main Background */
    --color-surface-1: #F0F1F2; /* Accent */
    --color-surface-2: #E8EAEB; /* Accent L1 */
    --color-surface-3: #E0E4E6; /* Accent L2 */
    --color-surface-4: #D9DDDF; /* Accent L3 */
    
    /* Text */
    --color-base: #242424;
    --color-subtle: #677275;    /* Mid-tone */
    --color-emphasized: #000000; /* Contrast L1 */
    
    /* Scrollbars */
    --scrollbar-color: #F0F1F2;
    --scrollbar-color-hover: #E0E4E6;
}

/* --- MangaDex Dark Mode --- */
.skin-theme-clientpref-night {
    /* Backgrounds & Depth */
    --color-surface-0: #191A1C; /* Main Background */
    --color-surface-1: #2C2C2C; /* Accent */
    --color-surface-2: #3D3D3D; /* Accent L1 */
    --color-surface-3: #4F4F4F; /* Accent L2 */
    --color-surface-4: #585858; /* Accent L3 */

    /* Text */
    --color-base: #FFFFFF;
    --color-subtle: #8C8C8C;    /* Mid-tone */
    --color-emphasized: #FFFFFF; 
    
    /* Scrollbars */
    --scrollbar-color: #4F4F4F;
    --scrollbar-color-hover: #585858;
}

/* --- MangaDex User Role Badges --- */
.md-role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 16px; /* Pill shape */
    font-family: var(--font-family-citizen-base);
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #FFFFFF !important;
    margin-right: 6px;
    margin-bottom: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Specific Role Colors */
.md-role-admin { background-color: #9b59b6; color: #ffffff; }
.md-role-developer  { background-color: #ff6ee9; color: #ffffff; }
.md-role-global-moderator { background-color: #e91e63; color: #ffffff; }
.md-role-forum-moderator { background-color: #e91e63; color: #ffffff; }
.md-role-public-relations { background-color: #e67e22; color: #000000; }
.md-role-designer { background-color: #fe6eab; color: #000000; }
.md-role-staff { background-color: #e91e63; color: #ffffff; }

.md-role-knights-of-dex { background-color: #369876; color: #000000; }
.md-role-contributor { background-color: #206694; color: #ffffff; }
.md-role-power-uploader { background-color: #2ecc71; color: #000000; }
.md-role-group-leader { background-color: #3498db; color: #ffffff; }