MediaWiki:Colors.css

From Coral Island Wiki
Revision as of 09:22, 12 July 2024 by Mikevoir (talk | contribs)
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
:root { /* would use .skin-vector-light but there can be neither applied since its JS based so default lightmode */
	--theme-page-text-color: #43403D; /* lighter body font */
	--theme-page-background-color: rgba(255,255,255,0.98);
	--theme-page-background-color--rgb: 255, 255, 255;
	--theme-page-background-color--secondary: #3d3f45;
	
	/* Custom variables */
	--theme-alt-text: #FFF;
	--theme-accent-bg: #E2EEF2;
	--theme-infobox-bg: #FCFAF9;
	
	--color-player: #69ac52;
	--color-accent: #d89e43;
	
	--card-bg-main: #F6E6CF;
	--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;
    
    /* Others */
	--gray-900: #1F1E1E;
	--gray-800: #272727;
	--gray-700: #31302F;
	--gray-600: #403F3F;
	--gray-500: #545353;
	--gray-400: #848181;
	--gray-300: #9F9D9D;
	--gray-200: #C7C4C4;
	--gray-100: #E9E5E5;
	--gray-050: #F6F6F6;
	
	--brown-800: #3F3125;
	--brown-500: #B38A63;
	--brown-400: #CB9E71;
	--brown-300: #E4B17F;
	--brown-200: #EBC59F;
	--brown-100: #EFD8BE;
	--brown-050: #F7F2E8;
	
	--theme-link-color: #19cad6;
	--theme-link-color--rgb: 25,202,214;
	--theme-link-color--hover: #67e4ed;
	--accent: #F6816C;
	--light-blue: #C4D6EB;
	--gold: #D9A14A;
	--player: #71A350;
	--npc: #8C6233;
	
	--border-color: var(--gray-200);
	--border-color-rgb: 206,206,206;
}

:root .skin-vector-dark {
	--theme-page-text-color: #FFFFFF;
	--theme-page-background-color: rgb(27, 29, 36, 0.98);
	--theme-page-background-color--rgb: 27, 29, 36;
	--theme-page-background-color--secondary: #20242C;
	
	/* 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 */
    --theme-alert-color: #EF4F4F;
    --theme-alert-color--rgb: rgb(239,79,79);
    --theme-alert-color--hover: #D04545;
    
    /* User highlight */
    --custom-admin-highlight: #F6816C;
    --custom-contentmoderator-highlight: #8796ff;
    --custom-bot-color: #999999;
    --custom-bot-font-style: italic;
    
	/* Darker version of alert */
    --theme-alert-highlight: #a90000;
    --theme-alert-highlight--rgb: rgb(169, 0, 0);
    --theme-alert-highlight--hover: #c30000;
}

/* Use vars */
#content.mw-body, .parsoid-body {
	background-color: var(--theme-page-background-color) !important;
	border: 10px solid var(--theme-page-background-color);
}
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a {
	color: var(--theme-page-text-color) !important;
}
.mw-footer, .editOptions, .ace-tm, .vector-menu-heading {
	background-color: var(--theme-page-background-color) !important;
}
.ace-tm .ace_gutter, .selected.mw-list-item, .vector-menu-content-list > a {
	background-color: var(--theme-page-background-color--secondary) !important;
}

/* Change color of classes that used alert-color as bg color */
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
.skin-vector-dark .wds-table-td-alert,
.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);
}