MediaWiki:Gadget-Colors.css: Difference between revisions

/** Root **/
:root .theme-fandomdesktop-light , :root .theme-fandommobile-light {
    --theme-accent-color--rgba: 71, 202, 178;
    --theme-page-text-color: #43403D;
    --theme-page-text-color-inverse: #FFFFFF;
    --theme-border-color: #CECECE !important;
    --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;
    
    /* background */
	--background-color-active: #C6F4DE80;
	--background-color-inactive: #F4CCCC80;
}

:root .theme-fandomdesktop-dark , :root .theme-fandommobile-dark {
    --theme-accent-color--rgba: 71, 202, 178;
    --theme-page-text-color: #FFFFFF;
    --theme-page-text-color-inverse: #3d4342;
    --theme-border-color: var(--theme-color-7) !important;
    --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;
    
    /* 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;
}

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

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

/** Invert filter **/
.theme-fandomdesktop-dark .invert-dark { filter: invert(1); }
.theme-fandomdesktop-light .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 */
.theme-fandomdesktop.dark #mw-notification-area.mw-notification.mw-notification-type-error,
.theme-fandomdesktop.dark .postedit.mw-notification.mw-notification-type-error,
.theme-fandomdesktop.dark .wds-table-td-alert,
.theme-fandomdesktop-dark .diff td.diff-deletedline .diffchange {
    background-color: var(--theme-alert-highlight);
}

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

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

/* [[Template:Color]] */

.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); }

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

/* Syntax highlight for source editor */
.theme-fandomdesktop-dark.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; }