MediaWiki:Colors.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
No edit summary
m (Color Update)
 
(47 intermediate revisions by 5 users not shown)
Line 1: Line 1:
:root { /* would use .skin-vector-light but there can be neither applied since its JS based so default lightmode */
/** Foundation: MediaWiki Colors **/
--theme-page-text-color: #43403D; /* lighter body font */
:root {
     /* Main Palette */
/* Custom variables */
     --teal-600: #2c7a7b;
--theme-alt-text: #FFF;
     --teal-500: #319795;
--theme-accent-bg: #E2EEF2;
     --teal-400: #38b2ac;
--theme-infobox-bg: #FCFAF9;
     --teal-300: #4fd1c7;
    --teal-200: #81e6d9;
--color-player: #69ac52;
    --teal-100: #b2f5ea;
--color-accent: #d89e43;
    --teal-050: #e6fffa;
    --gold-accent: #e7c361;
--card-bg-main: #F6E6CF;
    --gold-hover: #d69e2e;
--card-bg-sub: #E9CDA2;
--letter-bg: #FAF3EA;
     /* User highlight */
     --custom-admin-highlight: #c05822;
     --custom-contentmoderator-highlight: #6368e6;
     --custom-bot-color: #999999;
     --custom-bot-font-style: italic;
}
 
:root .skin-vector-dark {
--theme-page-text-color: #FFFFFF;
/* Custom variables */
--theme-alt-text: #383533;
--theme-accent-bg: #403F3F;
--theme-infobox-bg: #222020;
--color-player: #69ac52;
--color-accent: #d89e43;
--card-bg-main: #2C2C2C;
--card-bg-sub: #474746;
--letter-bg: #1C1A1A;


/* Recolor red links */
    /* Grayscale */
     --theme-alert-color: #EF4F4F;
     --gray-950: #0f1419;
    --theme-alert-color--rgb: rgb(239,79,79);
     --gray-900: #1a202c;
     --theme-alert-color--hover: #D04545;
     --gray-700: #4a5568;
   
     --gray-050: #ffffff;
    /* User highlight */
     --custom-admin-highlight: #F6816C;
     --custom-contentmoderator-highlight: #8796ff;
    --custom-bot-color: #999999;
    --custom-bot-font-style: italic;
}
}


/* Darker version of alert */
/* Light Theme Variables */
.skin-vector-dark {
:root body:not(.skin-vector-dark) {
     --theme-alert-highlight: #a90000;
     --theme-page-text-color: #1a2a2a;
     --theme-alert-highlight--rgb: rgb(169, 0, 0);
    --theme-page-background-color: #f5fdfb;
     --theme-alert-highlight--hover: #c30000;
     --theme-page-background-color--secondary: #e8f5f3;
     --theme-link-color: #007d7a;
    --theme-border-color: #a1e9dc;
    --theme-border-color-rgb: 161, 233, 220;
    --accent: var(--teal-400);
}
}


/* Set page text color */
/* Dark Theme Variables */
h1, h2, h3, h4, h5, h6, .mw-body {
:root .skin-vector-dark {
color: var(--theme-page-text-color);
     --theme-page-text-color: #e6f7f5;
}
    --theme-page-background-color: #1a202c;
 
    --theme-page-background-color--secondary: #2a363d;
/* Change color of classes that used alert-color as bg color */
    --theme-link-color: #5fd9cf;
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
    --theme-border-color: #4d6872;
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
    --theme-border-color-rgb: 77, 104, 114;
.skin-vector-dark .wds-table-td-alert,
    --accent: var(--teal-300);
.skin-vector-dark .diff td.diff-deletedline .diffchange {
     background-color: var(--theme-alert-highlight);
}
.text-error {
color: var(--theme-alert-highlight);
}
 
/* For  [[Template:Color]] */
.text-player, .text-player * { color: var(--color-player); }
.bg-player { background-color: var(--color-player); }
 
.text-accent, .text-accent * { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
 
 
/*
USER HIGHLIGHT
Please keep list alphabetized
*/
 
/* Admin */
a[href="https://coralisland.wiki/wiki/User:Mikevoir"], a[href="/wiki/User:Mikevoir"], a[href="/wiki/Special:Contributions/Mikevoir"],
a[href="https://coralisland.wiki/wiki/User:Novell"], a[href="/wiki/User:Novell"], a[href="/wiki/Special:Contributions/Novell"],
a[href="https://coralisland.wiki/wiki/User:Salty_Nori"], a[href="/wiki/User:Salty_Nori"], a[href="/wiki/Special:Contributions/Salty_Nori"]
{
color: var(--custom-admin-highlight);
}
 
/* Content moderator
a[href="https://coralisland.wiki/wiki/User:NAME"], a[href="/wiki/User:NAME"], a[href="/wiki/Special:Contributions/NAME"]
{
color: var(--custom-contentmoderator-highlight);
}
*/
/* Bots */
a[href="https://coralisland.wiki/wiki/User:NoriBot"], a[href="/wiki/User:NoriBot"], a[href="/wiki/Special:Contributions/NoriBot"],
a[href="https://coralisland.wiki/wiki/User:VoirBot"], a[href="/wiki/User:VoirBot"], a[href="/wiki/Special:Contributions/VoirBot"]
{
color: var(--custom-bot-color);
font-style: var(--custom-bot-font-style);
}
}

Latest revision as of 11:53, 25 March 2026

/** Foundation: MediaWiki Colors **/
:root {
    /* Main Palette */
    --teal-600: #2c7a7b;
    --teal-500: #319795;
    --teal-400: #38b2ac;
    --teal-300: #4fd1c7;
    --teal-200: #81e6d9;
    --teal-100: #b2f5ea;
    --teal-050: #e6fffa;
    --gold-accent: #e7c361;
    --gold-hover: #d69e2e;

    /* Grayscale */
    --gray-950: #0f1419;
    --gray-900: #1a202c;
    --gray-700: #4a5568;
    --gray-050: #ffffff;
}

/* Light Theme Variables */
:root body:not(.skin-vector-dark) {
    --theme-page-text-color: #1a2a2a;
    --theme-page-background-color: #f5fdfb;
    --theme-page-background-color--secondary: #e8f5f3;
    --theme-link-color: #007d7a;
    --theme-border-color: #a1e9dc;
    --theme-border-color-rgb: 161, 233, 220;
    --accent: var(--teal-400);
}

/* Dark Theme Variables */
:root .skin-vector-dark {
    --theme-page-text-color: #e6f7f5;
    --theme-page-background-color: #1a202c;
    --theme-page-background-color--secondary: #2a363d;
    --theme-link-color: #5fd9cf;
    --theme-border-color: #4d6872;
    --theme-border-color-rgb: 77, 104, 114;
    --accent: var(--teal-300);
}