MediaWiki:Gadget-Colors.css: Difference between revisions

From Honkai: Nexus Anima Wiki
Jump to navigation Jump to search
Browse history interactively
← Older edit

Kuhlau (talk | contribs)

2 user groups
284 edits
Raven.Familiar (talk | contribs)
Advanced Access, rollback, Administrators, threadmoderator
1,636 edits
No edit summary
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
284 edits
No edit summary
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/** Root **/
/** Root **/
:root .theme-fandomdesktop-light , :root .theme-fandommobile-light {
:root, .wgl-lightmode, .wgl-theme-light {
--theme-accent-color: #47cab2;
     --theme-accent-color--rgba: 71, 202, 178;
     --theme-accent-color--rgba: 71, 202, 178;
     --theme-page-text-color: #43403D;
     --theme-page-text-color: #43403D;
     --theme-page-text-color-inverse: #FFFFFF;
     --theme-page-text-color-inverse: #FFFFFF;
    --theme-link-color: #a65000;
     --theme-border-color: #CECECE !important;
     --theme-border-color: #CECECE !important;
    --theme-page-background-color: #fff;
     --theme-page-background-color--secondary: #f2f2f2;
     --theme-page-background-color--secondary: #f2f2f2;
    --background-color-neutral-subtle: #f8f9fa;
      
      
     --group-color: var(--theme-color-5);
     --group-color: var(--theme-color-5);
Line 63: Line 67:
     --color-old: #932015;
     --color-old: #932015;
     --color-help: #BB8010;
     --color-help: #BB8010;
   
    --color-R4S: #9563C8;
    --color-R5S: #E7B442;
      
      
     /* background */
     /* background */
Line 82: Line 89:
}
}


:root .theme-fandomdesktop-dark , :root .theme-fandommobile-dark {
:root .wgl-darkmode , :root .wgl-theme-dark {
--theme-accent-color: #47cab2;
     --theme-accent-color--rgba: 71, 202, 178;
     --theme-accent-color--rgba: 71, 202, 178;
     --theme-page-text-color: #FFFFFF;
     --theme-page-text-color: #FFFFFF;
     --theme-page-text-color-inverse: #3d4342;
     --theme-page-text-color-inverse: #3d4342;
--theme-link-color: #4cc2ad;
     --theme-border-color: var(--theme-color-7) !important;
     --theme-border-color: var(--theme-color-7) !important;
    --theme-page-background-color: #111a20;
     --theme-page-background-color--secondary: var(--theme-color-6);
     --theme-page-background-color--secondary: var(--theme-color-6);
    --background-color-neutral-subtle: #1b1c1c;
      
      
     --group-color: var(--theme-accent-color);
     --group-color: var(--theme-accent-color);
Line 144: Line 155:
     --color-old: #e35045;
     --color-old: #e35045;
     --color-help: #e0bb00;
     --color-help: #e0bb00;
   
    --color-R4S: #9563C8;
    --color-R5S: #E7B442;
      
      
     /* background */
     /* background */
Line 166: Line 180:
     --desc-content: #bf8c4015;     
     --desc-content: #bf8c4015;     
}
}
/* Skin-specific */
:root {
--background-color-base: var(--theme-page-background-color);
--color-base: var(--theme-page-text-color);
--border-base: var(--theme-border-color);
}


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


/* Darker version of alert */
/* Darker version of alert */
.theme-fandomdesktop-dark {
.wgl-darkmode, .wgl-theme-dark {
     --theme-alert-highlight: #a90000;
     --theme-alert-highlight: #a90000;
     --theme-alert-highlight--rgb: rgb(169, 0, 0);
     --theme-alert-highlight--rgb: rgb(169, 0, 0);
     --theme-alert-highlight--hover: #c30000;
     --theme-alert-highlight--hover: #c30000;
}
/** Highlighting **/
.bg-highlight {
    background-color: rgb(137, 137, 137);
    background-color: rgba(137, 137, 137, 0.4);
}
}


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


/** Theme colors **/
/** Theme colors **/
Line 211: Line 241:


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


.theme-fandomdesktop-dark .diff td.diff-deletedline {
.wgl-darkmode .diff td.diff-deletedline {
     border-color: var(--theme-alert-highlight);
     border-color: var(--theme-alert-highlight);
}
}
/* [[Template:Color]] */


.text-error, .text-error * { color: var(--theme-alert-color); }
.text-error, .text-error * { color: var(--theme-alert-color); }
.bg-error { background-color: var(--theme-alert-highlight); }
.bg-error { background-color: var(--theme-alert-highlight); }
/* [[Template:Color]] */


.text-buzz, .text-buzz * { color: var(--color-buzz); }
.text-buzz, .text-buzz * { color: var(--color-buzz); }
Line 241: Line 271:
.text-help, .text-help * { color: var(--color-help); }
.text-help, .text-help * { color: var(--color-help); }
.bg-help { background-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 */
/* Backgrounds */
Line 247: Line 286:


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

Latest revision as of 03:13, 14 July 2026

/** 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;
    --background-color-neutral-subtle: #f8f9fa;
    
    --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);
    --background-color-neutral-subtle: #1b1c1c;
    
    --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);
	--border-base: var(--theme-border-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; }
Retrieved from "https://hna.wiki/MediaWiki:Gadget-Colors.css?oldid=8986"