MediaWiki:Colors.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
No edit summary
mNo edit summary
Line 1: Line 1:
:root body:not(.skin-vector-dark) { /* would use .skin-vector-light but there can be neither applied since its JS based so default lightmode */
/* ===== COLOR SYSTEM ===== */
--theme-page-text-color: #0000FF; /* lighter body font */
--theme-page-text-color--inverse: #FFFFFF;
--theme-page-background-color: rgba(255, 255, 255, 0.98);
--theme-page-background-color--rgb: 235, 103, 33;
--theme-page-background-color--secondary: #3e393d;
--theme-page-background-color--secondary--rgb: 62,57,61;
--theme-link-color: #327b9a;
--theme-link-color--rgb: 50,123,154;
--theme-link-color--hover: #193d4d;
--theme-link-label-color: #8c5308;
--theme-accent-color: #ddb478;
--theme-accent-color--rgb: 221,180,120;
--theme-accent-color--hover: #be8430;
--theme-accent-label-color: #000;
--theme-border-color: #d9a83f; /* fixed double # */
--theme-border-color--rgb: 206,206,206;
--theme-alert-color: #bf0017;
--theme-alert-color--rgb: 191,0,23;
--theme-alert-color--hover: #59000a;
--theme-alert-color--secondary: #bf0017;
--theme-alert-label: #fff;
--theme-warning-color: #cf721c;
--theme-warning-color--rgb: 207,114,28;
--theme-warning-color--secondary: #ce711b;
--theme-warning-label: #000;
--theme-success-color: #0c742f;
--theme-success-color--rgb: 12,116,47;
--theme-success-color--secondary: #0c742f;
--theme-success-label: #fff;
--theme-message-color: #753369;
--theme-message-label: #fff;
--theme-alert-highlight: var(--theme-alert-color);
--theme-alert-highlight--rgb: var(--theme-alert-color--rgb);
--theme-alert-highlight--hover: var(--theme-alert-color--hover);
mw
/* 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;
--accent: #F6816C;
--player: #71A350;
--npc: #8C6233;
}


:root .skin-vector-dark {
:root {
--theme-page-text-color: #FFFFFF;
/* Gray Scale */
--theme-page-text-color--inverse: #43403D;
--gray-950: #0f1419;
--theme-page-background-color: rgb(27, 29, 36, 0.98);
--gray-900: #1a202c;
--theme-page-background-color--rgb: 27, 29, 36;
--gray-800: #2d3748;
--theme-page-background-color--secondary: #474747;
--gray-700: #4a5568;
--theme-page-background-color--secondary--rgb: 71,71,71;
--gray-600: #718096;
--theme-link-color: #deb76c;
--gray-500: #a0aec0;
--theme-link-color--rgb: 222,183,108;
--gray-400: #cbd5e0;
--theme-link-color--hover: #f0dfbf;
--gray-300: #e2e8f0;
--theme-link-label-color: #000;
--gray-200: #edf2f7;
--theme-accent-color: #deb76c;
--gray-100: #f7fafc;
--theme-accent-color--rgb: 222,183,108;
--theme-accent-color--hover: #ba8829;
--theme-accent-label-color: #000;
--theme-border-color: #4e4f55;
--theme-border-color--rgb: 78,79,85;
--theme-alert-color: #d8001a;
--theme-alert-color--rgb: 216,0,26;
--theme-alert-color--hover: #ff3f56;
--theme-alert-color--secondary: #ff445a;
--theme-alert-label: #fff;
--theme-warning-color: #cf721c;
--theme-warning-color--rgb: 207,114,28;
--theme-warning-color--secondary: #d3741c;
--theme-warning-label: #000;
--theme-success-color: #0c7d32;
--theme-success-color--rgb: 12,125,50;
--theme-success-color--secondary: #0fa240;
--theme-success-label: #fff;
--theme-message-color: #a34792;
--theme-message-label: #fff;
/* Custom variables */
--theme-alt-text: #383533;
--theme-accent-bg: #403F3F;
--theme-infobox-bg: #222020;
--color-player: #69ac52;
--color-accent: #d89e43;
--card-bg-main: #2C2C2C;
/* Teal Scale */
--card-bg-sub: #474746;
--teal-900: #1d4044;
--teal-800: #234e52;
--teal-700: #285e61;
--teal-600: #2c7a7b;
--teal-500: #319795;
--teal-400: #38b2ac;
--teal-300: #4fd1c7;
--teal-200: #81e6d9;
--teal-100: #b2f5ea;
--teal-50: #e6fffa;
--letter-bg: #1C1A1A;
/* Spacing */
   
--spacing-xs: 4px;
    /* User highlight */
--spacing-sm: 8px;
    --custom-admin-highlight: #F6816C;
--spacing-md: 16px;
    --custom-contentmoderator-highlight: #8796ff;
--spacing-lg: 24px;
    --custom-bot-color: #999999;
--spacing-xl: 32px;
    --custom-bot-font-style: italic;
--spacing-2xl: 48px;
   
/* Darker version of alert */
--theme-alert-highlight: #a90000;
--theme-alert-highlight--rgb: rgb(169,0,0);
--theme-alert-highlight--hover: #c30000;
}
 
:root { /* universal styles */
    /* 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;
/* Shadows */
--brown-500: #B38A63;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--brown-400: #CB9E71;
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--brown-300: #E4B17F;
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--brown-200: #EBC59F;
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
--brown-100: #EFD8BE;
--brown-050: #F7F2E8;
--light-blue: #C4D6EB;
/* Borders */
--gold: #D9A14A;
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-full: 9999px;
/* Used by specific modules/functions */
/* Transitions */
--border-color: var(--theme-border-color);
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
}


/* Use vars */
/* Light Theme */
#content.mw-body, .parsoid-body {
:root body:not(.skin-vector-dark) {
background-color: #d1d7f6 !important;
--theme-page-text-color: #1a2a2a;
border: 10px solid #d1d7f6;
--theme-page-background-color: #f5fdfb;
}
--theme-page-background-color--secondary: #e8f5f3;
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label {
--theme-link-color: #007d7a;
color: var(--theme-page-text-color);
--theme-link-color--hover: #005652;
}
--theme-accent-color: #38b2ac;
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
--theme-accent-label-color: #ffffff;
background-color: #d1d7f6 !important;
--theme-border-color: #a1e9dc;
}
--theme-border-color--subtle: #d1f5ee;
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
--card-bg-main: #ffffff;
background-color: var(--theme-page-background-color--secondary) !important;
--card-bg-elevated: #ffffff;
--input-bg: #ffffff;
--input-border: #cbd5e0;
}
}


/* Change color of classes that used alert-color as bg color */
/* Dark Theme */
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
:root .skin-vector-dark {
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
--theme-page-text-color: #e6f7f5;
.skin-vector-dark .wds-table-td-alert {
--theme-page-background-color: rgba(22, 28, 36, 0.98);
    background-color: var(--theme-alert-highlight);
--theme-page-background-color--secondary: #2a363d;
}
--theme-link-color: #5fd9cf;
.text-error {
--theme-link-color--hover: #81e6d9;
color: var(--theme-alert-highlight);
--theme-accent-color: #5fd9cf;
--theme-accent-label-color: #1a202c;
--theme-border-color: #4d6872;
--theme-border-color--subtle: #3a5059;
--card-bg-main: #2a363d;
--card-bg-elevated: #34444d;
--input-bg: #2d3748;
--input-border: #4a5568;
}
}


/* Revision diff styling */
/* Element-specific Colors */
 
.text-player { color: #60d9c5; font-weight: 600; }
.diff td.diff-addedline {
.text-accent { color: var(--theme-accent-color); font-weight: 600; }
  background-color:var(--theme-page-background-color);
.text-error { color: #d53f3f; }
  border-color:var(--theme-success-color);
.text-warning { color: #c05621; }
  border-width:1px 1px 1px 4px
.text-success { color: #2e8b57; }
}
.diff td.diff-addedline .diffchange {
  background-color:var(--theme-success-color);
  color:var(--theme-page-text-color--inverse);
  font-weight: normal;
}
.diff td.diff-deletedline {
  background-color:var(--theme-page-background-color);
  border-color:var(--theme-alert-color);
  border-width:1px 1px 1px 4px
}
.diff td.diff-deletedline .diffchange {
  background-color:var(--theme-alert-color);
  color:var(--theme-page-text-color--inverse);
  font-weight: normal;
}
.diff td.diff-context {
  background:#0000;
  border-color:var(--theme-border-color);
  color:var(--theme-page-text-color);
}
.diff-marker a.mw-diff-movedpara-right {
  color:#0000
}
.diff-marker a.mw-diff-movedpara-right:hover:after {
  opacity:.75
}
.diff-marker a.mw-diff-movedpara-right:after {
  color:var(--theme-page-text-color);
  content:"↩";
}
.diff-marker a.mw-diff-movedpara-left {
  color:#0000
}
.diff-marker a.mw-diff-movedpara-left:hover:after {
  opacity:.75
}
.diff-marker a.mw-diff-movedpara-left:after {
  color:var(--theme-page-text-color);
  content:"↪"
}
 
/* 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); }
 
/* CodeMirror */
.CodeMirror .CodeMirror-scroll {
  background: var(--theme-page-background-color);
  color: var(--theme-page-text-color);
}
.CodeMirror .CodeMirror-linenumber, .CodeMirror .CodeMirror-gutters {
  background: var(--theme-page-background-color--secondary);
  color: var(--theme-page-text-color);
}
 
/*
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);
}

Revision as of 09:08, 25 March 2026

/* ===== COLOR SYSTEM ===== */

:root {
	/* Gray Scale */
	--gray-950: #0f1419;
	--gray-900: #1a202c;
	--gray-800: #2d3748;
	--gray-700: #4a5568;
	--gray-600: #718096;
	--gray-500: #a0aec0;
	--gray-400: #cbd5e0;
	--gray-300: #e2e8f0;
	--gray-200: #edf2f7;
	--gray-100: #f7fafc;
	
	/* Teal Scale */
	--teal-900: #1d4044;
	--teal-800: #234e52;
	--teal-700: #285e61;
	--teal-600: #2c7a7b;
	--teal-500: #319795;
	--teal-400: #38b2ac;
	--teal-300: #4fd1c7;
	--teal-200: #81e6d9;
	--teal-100: #b2f5ea;
	--teal-50: #e6fffa;
	
	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	
	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
	
	/* Borders */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-full: 9999px;
	
	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme */
: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-link-color--hover: #005652;
	--theme-accent-color: #38b2ac;
	--theme-accent-label-color: #ffffff;
	--theme-border-color: #a1e9dc;
	--theme-border-color--subtle: #d1f5ee;
	--card-bg-main: #ffffff;
	--card-bg-elevated: #ffffff;
	--input-bg: #ffffff;
	--input-border: #cbd5e0;
}

/* Dark Theme */
:root .skin-vector-dark {
	--theme-page-text-color: #e6f7f5;
	--theme-page-background-color: rgba(22, 28, 36, 0.98);
	--theme-page-background-color--secondary: #2a363d;
	--theme-link-color: #5fd9cf;
	--theme-link-color--hover: #81e6d9;
	--theme-accent-color: #5fd9cf;
	--theme-accent-label-color: #1a202c;
	--theme-border-color: #4d6872;
	--theme-border-color--subtle: #3a5059;
	--card-bg-main: #2a363d;
	--card-bg-elevated: #34444d;
	--input-bg: #2d3748;
	--input-border: #4a5568;
}

/* Element-specific Colors */
.text-player { color: #60d9c5; font-weight: 600; }
.text-accent { color: var(--theme-accent-color); font-weight: 600; }
.text-error { color: #d53f3f; }
.text-warning { color: #c05621; }
.text-success { color: #2e8b57; }
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&oldid=28364"