MediaWiki:Colors.css: Difference between revisions

Revision as of 22:18, 16 November 2023

:root {
	/* colors of elements */
	--earth-color: #cc9900;
	--water-color: blue;
	--wind-color: green;
	--fire-color: red;
	--ice-color: #33CCFF;
	--lightning-color: purple;
	--light-color: gray;
	--dark-color: black;
	
	/* goldsmithing theme: gold with blue jewels */
	--goldsmithing-dark-gold: hsl(45, 65%, 52%);
	--goldsmithing-medium-gold: hsl(45, 65%, 80%);
	--goldsmithing-light-gold: hsl(45, 65%, 92%);
	--goldsmithing-blue: hsl(219, 94%, 34%);
	
	/* cooking theme: cucumber, tomato, lime and pancakes */
	--cooking-medium-red: hsl(9, 100%, 64%);
	--cooking-dark-red: hsl(9, 100%, 44%);
	--cooking-light-red: hsl(9, 100%, 89%);
	--cooking-dark-green: hsl(120, 100%, 21%);
	--cooking-light-green: hsl(120, 61%, 90%);
	--cooking-light-yellow: hsl(54, 89%, 87%);
	
	/* alchemy theme: arabic nights (purple, teal, gold) */
	--alchemy-dark-purple: hsl(267, 57%, 40%);
	--alchemy-medium-purple: hsl(267, 57%, 65%);
	--alchemy-light-purple: hsl(267, 57%, 93%);
	--alchemy-lightest-purple: hsl(267, 57%, 93%);
	--alchemy-teal: hsl(173, 100%, 35%);
	--alchemy-light-gold: hsl(51, 100%, 81%);
	--alchemy-lightest-gold: hsl(51, 100%, 93%);
}

/* || Element Colors */
.earth-color {
	color: var(--earth-color);
}
.water-color {
	color: var(--water-color);
}
.wind-color {
	color: var(--wind-color);
}
.fire-color {
	color: var(--fire-color);
}
.ice-color {
	color: var(--ice-color);
}
.lightning-color {
	color: var(--lightning-color);
}
.light-color {
	color: var(--light-color);
}
.dark-color {
	color: var(--dark-color);
}

/* || Crafting Tables Colors */

/* alchemy - because of three colors, backgrounds are separated from tables */
/* alchemy tables */

.alchemy-table th,
tr.alchemy-table th{
	background-color: var(--alchemy-medium-purple);
	border: 1px solid var(--alchemy-dark-purple);
}
.alchemy-table td,
tr.alchemy-table td {
	background-color: var(--alchemy-lightest-purple);
	border: 1px solid var(--alchemy-dark-purple);
}
.alchemy-table-alt th,
tr.alchemy-table-alt th {
	background-color: var(--alchemy-teal);
	border: 1px solid var(--alchemy-teal);
}
.alchemy-table-alt td,
tr.alchemy-table-alt td {
	background-color: var(--alchemy-lightest-gold);
	border: 1px solid var(--alchemy-teal);
}

/* alchemy divs */
.alchemy-header {
	background-color: var(--alchemy-medium-purple);
}
.alchemy-body {
	background-color: var(--alchemy-light-gold);
}
.alchemy-header-alt {
	background-color: var(--alchemy-teal);
}
.alchemy-body-alt {
	background-color: var(--alchemy-light-purple);
}

/* alchemy text */
.alchemy-text-alt,
.alchemy-text-alt a,
.alchemy-text-alt span.active-category-link {
	color: var(--alchemy-teal);
}

.alchemy-table th,
.alchemy-table th a,
tr.alchemy-table th
tr.alchemy-table th a,
.alchemy-table-alt th,
.alchemy-table-alt th a,
tr.alchemy-table-alt th
tr.alchemy-table-alt th a {
	color: white;  /* white font color because of dark backgrounds */
}



/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.alchemy-header.container, 
.alchemy-body.container, 
.alchemy-body-alt.container, 
.alchemy-border-thick th,
.alchemy-border-thick td {
	border: 2px solid var(--alchemy-dark-purple);
}

/* ---------- Woodworking ---------- */
/* woodworking backgrounds*/
.woodworking-header, 
.woodworking-table th, 
tr.woodworking-table th {
	background-color: hsl(32, 57%, 44%); /* medium dark brown */
}
.woodworking-body,
.woodworking-table td,
tr.woodworking-table td {
	background-color: hsl(32, 57%, 91%); /* light brown */
}
/* grass green as alternative header color */
.woodworking-header-alt, 
.woodworking-table-alt th, 
tr.woodworking-table-alt th {
	background-color: hsl(78, 86%, 30%); /* grass green */
}
/* light brown as alternative for body color */
.woodworking-body-alt, 
.woodworking-table-alt td, 
tr.woodworking-table-alt td {
	background-color: hsl(32, 57%, 80%); /* medium light brown */
}
/* woodworking text */
.woodworking-text-alt,
.woodworking-text-alt a,
.woodworking-text-alt span.active-category-link {
	color: hsl(78, 86%, 30%); /* grass green */
}
/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.woodworking-header.container, 
.woodworking-body.container, 
.woodworking-body-alt.container, 
.woodworking-border-thick th,
.woodworking-border-thick td {
	border: 2px solid hsl(32, 57%, 30%); /* dark brown */
}

/* ---------- end of Woodworking ---------- */

/* bonecraft */
.bonecraft-header, 
.bonecraft-table th,
tr.bonecraft-table th {
	background-color: hsl(45, 62%, 83%); /* medium bone */
}
.bonecraft-body,
.bonecraft-table td,
.bonecraft-table td {
	background-color: hsl(0, 0%, 96%); /* light bone */
}
.bonecraft-header-alt, 
.bonecraft-table-alt th,
tr.bonecraft-table-alt th {
	background-color: hsl(31, 42%, 75%); /* earthy brown */
}
.bonecraft-body-alt, 
.bonecraft-table-alt td,
tr.bonecraft-table-alt td {
	background-color: hsl(0, 0%, 96%); /* also light bone atm */
}
/* bonecraft text */
.bonecraft-text-alt,
.bonecraft-text-alt a,
.bonecraft-text-alt span.active-category-link {
	color: hsl(31, 42%, 75%); /* earthy brown */
}
/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.bonecraft-header.container, 
.bonecraft-body.container, 
.bonecraft-body-alt.container, 
.bonecraft-border-thick th,
.bonecraft-border-thick td {
	border: 2px solid hsl(45, 62%, 83%); /* medium bone */
}


/* goldsmithing */
/* goldsmithing backgrounds */
.goldsmithing-header,
.goldsmithing-table th, 
tr.goldsmithing-table th {
	background-color: var(--goldsmithing-dark-gold); /* dark gold */
}
.goldsmithing-body,
.goldsmithing-table td, 
tr.goldsmithing-table td {
	background-color: var(--goldsmithing-light-gold); /* light gold */
}
.goldsmithing-header-alt, 
.goldsmithing-table-alt th,
tr.goldsmithing-table-alt th {
	background-color: var(--goldsmithing-blue); /* blue jewels */
}
.goldsmithing-body-alt, 
.goldsmithing-table-alt td, 
tr.goldsmithing-table-alt td {
	background-color: var(--goldsmithing-medium-gold); /* medium gold */
}
/* goldsmithing text */
.goldsmithing-text-alt,
.goldsmithing-text-alt a,
.goldsmithing-text-alt span.active-category-link {
	color: var(--goldsmithing-blue); /* blue jewels font */
}
.goldsmithing-table-alt th,
.goldsmithing-table-alt th a,
tr.goldsmithing-table-alt th,
tr.goldsmithing-table-alt th a {
	color: white; /* white font because of too dark background */
}
/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.goldsmithing-header.container, 
.goldsmithing-body.container, 
.goldsmithing-body-alt.container, 
.goldsmithing-border-thick th,
.goldsmithing-border-thick td {
	border: 2px solid var(--goldsmithing-dark-gold); /* dark gold */
}


/* cooking */
/* cooking backgrounds */
.cooking-header,
.cooking-table th, 
tr.cooking-table th {
	background-color: var(--cooking-dark-green);
}
.cooking-body,
.cooking-table td, 
tr.cooking-table td {
	background-color: var(--cooking-light-green);
}
.cooking-header-alt, 
.cooking-table-alt th,
tr.cooking-table-alt th {
	background-color: var(--cooking-medium-red);
}
.cooking-body-alt, 
.cooking-table-alt td, 
tr.cooking-table-alt td {
	background-color: var(--cooking-light-yellow);
}
/* cooking text */
.cooking-table th, 
.cooking-table th a, 
tr.cooking-table th,
tr.cooking-table th a {
	color: white; /* white text color because of dark background */
}
.cooking-text-alt,
.cooking-text-alt a,
.cooking-text-alt span.active-category-link {
	color: var(--cooking-medium-red); /* tomato font */
}
/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.cooking-header.container, 
.cooking-body.container, 
.cooking-body-alt.container, 
.cooking-border-thick th,
.cooking-border-thick td {
	border: 2px solid var(--cooking-dark-red);
}