MediaWiki:Colors.css: Difference between revisions

Revision as of 13:07, 7 November 2023

:root {
	/* 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%);
}

/* || Crafting Tables Colors */

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

.alchemy-table th,
tr.alchemy-table th{
	color: white;
	background-color: hsl(267, 57%, 65%); /* medium purple */
	border: 1px solid hsl(267, 57%, 40%); /* dark purple */
}
.alchemy-table td,
tr.alchemy-table td {
	background-color: hsl(267, 57%, 93%); /* lightest purple, nearly white */
	border: 1px solid hsl(267, 57%, 40%); /* dark purple */
}
.alchemy-table-alt th,
tr.alchemy-table-alt th {
	color: white;
	background-color: hsl(173, 100%, 35%); /* teal */
	border: 1px solid hsl(173, 100%, 35%); /* teal */
}
.alchemy-table-alt td,
tr.alchemy-table-alt td {
	background-color: hsl(51, 100%, 93%); /* lightest gold, nearly white */
	border: 1px solid hsl(173, 100%, 35%); /* teal */
}

/* alchemy divs */
.alchemy-header {
	background-color: hsl(267, 57%, 65%); /* medium purple */
}
.alchemy-body {
	background-color: hsl(51, 100%, 81%); /* light gold */
}
.alchemy-header-alt {
	background-color: hsl(173, 100%, 35%); /* teal */
}
.alchemy-body-alt {
	background-color: hsl(267, 57%, 85%); /* light purple */
}

/* alchemy text */
.alchemy-text-alt,
.alchemy-text-alt a,
.alchemy-text-alt span.active-category-link {
	color: hsl(173, 100%, 35%); /* teal */
}

/* 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 hsl(267, 57%, 40%); /* 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 */
	color: white; /* white font because of too dark background */
}
.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 */
}
/* 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 */
}