MediaWiki:Gadget-Colors.css

Revision as of 02:36, 14 July 2026 by Kuhlau (talk | contribs)

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.
/** Root **/
:root, .wgl-lightmode, .wgl-theme-light {
	--theme-accent-color: #47cab2;
    --theme-accent-color--rgba: 71, 202, 178;
    --theme-page-text-color: #43403D;
    --theme-page-text-color-inverse: #FFFFFF;
    --theme-link-color: #a65000;
    --theme-border-color: #CECECE !important;
    --theme-page-background-color: #fff;
    --theme-page-background-color--secondary: #f2f2f2;
    
    --group-color: var(--theme-color-5);
    --border-color:var(--theme-color-1);
    --title-color: var(--theme-color-6);
    --subtitle-color:var(--theme-color-4);
    
    --pi-border: #CECECE !important;
    --pi-tabber-bg-color: #F1F1F1;
    --pi-tabber-color: #969696;
    --pi-title-bg-color: var(--theme-accent-color);
    --pi-title-color: var(--theme-page-text-color);
    --pi-header-bg-color: #E6E6E6;
    --pi-header-color: var(--theme-page-text-color);
    --pi-rows-color: #f7f7f7;
    
    --header-link-border-color-1: #f3eeeb;
    --header-link-border-color-2: #edd8ce;
    --mobile-lightbox-border-color: #a2a9b1;
    
    --theme-color-1 : #A5998D;
    --theme-color-2 : #B1A69B;
    --theme-color-3 : #BCB2A9;
    --theme-color-4 : #C7BFB7;
    --theme-color-5 : #D2CCC6;
    --theme-color-6 : #DFDAD5;
    --theme-color-7 : #E7E3DE;
    --theme-color-8 : #EFEBE7;
    --theme-color-9 : #F7F4EF;
    --theme-color-10: #FFFFFF;
    
    --table-ascension-bg-color: #F7F7F7;

    --custom-tabs-active-color: var(--theme-page-text-color);

	/* [[Template:Color]] */
    --color-beauty: #88CEC6;
    --color-change: #979EE2;
    --color-competition: #955A7B;
    --color-dark: #734E9D;
    --color-hate: #9B8EC1;
    --color-insatiability: #5BB8E7;
    --color-light: #EFBF3C;
    --color-love: #EDA1B6;
    --color-memory: #95C2E7;
    --color-peace: #DECEB0;
    --color-pride: #8879BC;
    --color-regret: #775378;
    --color-right: #5BB8E7;
    --color-satiation: #F5A77D;
    --color-war: #964545;
    --color-weakness: #B6D0E7;
    
    --color-buzz: #0075EB;
    --color-menu: #937C6E;
    --color-new: #317e2a;
    --color-old: #932015;
    --color-help: #BB8010;
    
    --color-R4S: #9563C8;
    --color-R5S: #E7B442;
    
    /* background */
	--background-color-active: #C6F4DE80;
	--background-color-inactive: #F4CCCC80;
	
	/** Portable Infobox Colors **/
    --pi-dark-bg:			var(--theme-color-3);
    --pi-border:			var(--theme-color-4);
    --pi-background-color:	var(--theme-color-5);
    --pi-header-color:		var(--theme-page-text-color);
    --pi-header-bg-color:	var(--theme-color-6);
    --pi-wds-tabs-bg-color: var(--theme-color-7);
    /** Navbox Colors **/
    --nav-group-bg-color:	var(--theme-color-8);
    /** Change History and Description Colors **/
    --desc-border: var(--theme-color-1);  
    --desc-content: #bf8c4015;    
}

:root .wgl-darkmode , :root .wgl-theme-dark {
	--theme-accent-color: #47cab2;
    --theme-accent-color--rgba: 71, 202, 178;
    --theme-page-text-color: #FFFFFF;
    --theme-page-text-color-inverse: #3d4342;
	--theme-link-color: #4cc2ad;
    --theme-border-color: var(--theme-color-7) !important;
    --theme-page-background-color: #111a20;
    --theme-page-background-color--secondary: var(--theme-color-6);
    
    --group-color: var(--theme-accent-color);
    --border-color:var(--theme-border-color);
    --title-color: var(--theme-accent-color);
    --subtitle-color:var(--theme-accent-color);
    
    --pi-border: var(--theme-border-color) !important;
    --pi-tabber-bg-color: var(--theme-color-6);
    --pi-tabber-color: var(--theme-page-text-color);
    --pi-title-bg-color: var(--theme-accent-color);
    --pi-title-color: var(--theme-page-background-color);
    --pi-header-bg-color: var(--theme-color-4);
    --pi-header-color: var(--theme-accent-color);
    --pi-rows-color: var(--theme-color-4);
    
    --header-link-border-color-1: #3d285a;
    --header-link-border-color-2: #2f295c;
    --mobile-lightbox-border-color: var(--theme-border-color);
    
    
    --theme-color-1 : hsl(205, 28%, 5%);
    --theme-color-2 : hsl(205, 28%, 8%);
    --theme-color-3 : hsl(204, 28%, 10%);
    --theme-color-4 : hsl(205, 28%, 13%);
    --theme-color-5 : hsl(205, 28%, 16%);
    --theme-color-6 : hsl(205, 20%, 20%);
    --theme-color-7 : hsl(205, 15%, 23%);
    --theme-color-8 : hsl(205, 15%, 27%);
    --theme-color-9 : hsl(205, 15%, 32%);
    --theme-color-10: hsl(205, 15%, 37%);
    
    --custom-tabs-active-color: var(--theme-page-background-color);

	/* [[Template:Color]] */
    --color-beauty: #88CEC6;
    --color-change: #979EE2;
    --color-competition: #955A7B;
    --color-dark: #734E9D;
    --color-hate: #9B8EC1;
    --color-insatiability: #5BB8E7;
    --color-light: #EFBF3C;
    --color-love: #EDA1B6;
    --color-memory: #95C2E7;
    --color-peace: #DECEB0;
    --color-pride: #8879BC;
    --color-regret: #775378;
    --color-right: #5BB8E7;
    --color-satiation: #F5A77D;
    --color-war: #964545;
    --color-weakness: #B6D0E7;
    
    --color-buzz: #2095EF;
    --color-menu: #D3BC8E;
    --color-new: #41be3a;
    --color-old: #e35045;
    --color-help: #e0bb00;
    
    --color-R4S: #9563C8;
    --color-R5S: #E7B442;
    
    /* background */
	--background-color-active: #C6F4DE80;
	--background-color-inactive: #F4CCCC80;
    
    /* Recolor red links */
    --theme-alert-color: #FF4B4B;
    --theme-alert-color--rgb: rgb(255,75,75);
    --theme-alert-color--hover: #ff6868;
    /** Portable Infobox Colors **/
    --pi-dark-bg:			var(--theme-color-3);
    --pi-border:			var(--theme-color-4);
    --pi-background-color:	var(--theme-color-5);
    --pi-header-color:		var(--theme-page-text-color);
    --pi-header-bg-color:	var(--theme-color-6);
    --pi-wds-tabs-bg-color: var(--theme-color-7);
    /** Navbox Colors **/
    --nav-group-bg-color:	var(--theme-color-8);
    /** Change History and Description Colors **/
    --desc-border: var(--pi-border);  
    --desc-content: #bf8c4015;    
}

/* Skin-specific */
:root {
	--background-color-base: var(--theme-page-background-color);
	--color-base: var(--theme-page-text-color);
}


/* Style scrollbars to match wiki theme */
#content {
	scrollbar-color: var(--theme-link-color) var(--theme-body-background-color);
}

/* Darker version of alert */
.wgl-darkmode, .wgl-theme-dark {
    --theme-alert-highlight: #a90000;
    --theme-alert-highlight--rgb: rgb(169, 0, 0);
    --theme-alert-highlight--hover: #c30000;
}

/** Highlighting **/
.bg-highlight {
    background-color: rgb(137, 137, 137);
    background-color: rgba(137, 137, 137, 0.4);
}

/** Invert filter **/
.wgl-darkmode .invert-dark { filter: invert(1); }
.wgl-lightmode .invert-light { filter: invert(1); }

/** Theme colors **/
.text-primary { color: var(--theme-page-text-color); }
.text-secondary { color: var(--theme-page-text-color--hover); }
.text-background { color: var(--theme-body-background-color); }
.text-sidebar { color: var(--theme-page-background-color--secondary); }
.text-accent { color: var(--theme-accent-label-color); }

.bg-primary { background-color: var(--theme-page-text-color); }
.bg-secondary { background-color: var(--theme-page-text-color--hover); }
.bg-background { background-color: var(--theme-body-background-color); }
.bg-sidebar { background-color: var(--theme-page-background-color--secondary); }
.bg-accent { background-color: var(--theme-accent-label-color); }

/* Colors from MediaWiki:Variables.css */
.text-title { color: var(--title-color); }
.text-subtitle { color: var(--subtitle-color); }
.text-group { color: var(--group-color); }
.text-border { color: var(--border-color); }

.bg-title { background-color: var(--title-color); }
.bg-subtitle { background-color: var(--subtitle-color); }
.bg-group { background-color: var(--group-color); }
.bg-border { background-color: var(--border-color); }

.border-title { border-color: var(--title-color); }
.border-subtitle { border-color: var(--subtitle-color); }
.border-group { border-color: var(--group-color); }
.border-border { border-color: var(--border-color); }

/* Change color of classes that used alert-color as bg color */
.wgl-darkmode #mw-notification-area.mw-notification.mw-notification-type-error,
.wgl-darkmode .postedit.mw-notification.mw-notification-type-error,
.wgl-darkmode .wds-table-td-alert,
.wgl-darkmode .diff td.diff-deletedline .diffchange {
    background-color: var(--theme-alert-highlight);
}

.wgl-darkmode .diff td.diff-deletedline {
    border-color: var(--theme-alert-highlight);
}

/* [[Template:Color]] */

.text-error, .text-error * { color: var(--theme-alert-color); }
.bg-error { background-color: var(--theme-alert-highlight); }

.text-buzz, .text-buzz * { color: var(--color-buzz); }
.bg-buzz { background-color: var(--color-buzz); }

.text-menu, .text-menu * { color: var(--color-menu); }
.bg-menu { background-color: var(--color-menu); }

.text-new, .text-new * { color: var(--color-new); }
.bg-new { background-color: var(--color-new); }

.text-old, .text-old * { color: var(--color-old); }
.bg-old { background-color: var(--color-old); }

.text-help, .text-help * { color: var(--color-help); }
.bg-help { background-color: var(--color-help); }



.text-R4S, .text-R4S * { color: var(--color-R4S); }
.bg-R4S { background-color: var(--color-R4S); }

.text-R5S, .text-R5S * { color: var(--color-R5S); }
.bg-R5S { background-color: var(--color-R5S); }


/* Backgrounds */
.bg-active { background-color: var(--background-color-active); }
.bg-inactive { background-color: var(--background-color-inactive); }

/* Syntax highlight for source editor */
.wgl-darkmode.skin-fandomdesktop .cm {
    --codemirror-purple: #D2A8FF;
}

/* [[Template:Check]] */
.check-yes { color: #3DC434; font-size: 20px; }
.check-no { color: red; font-size: 20px; }
.check-blank { font-size: 20px; }
.check-unknown { font-size: 20px; }
.check-special { color: #C014E2; font-size: 20px; }