MediaWiki:Colors.css: Difference between revisions

Revision as of 23:34, 6 November 2023

/* || Crafting Tables Colors */

/* alchemy */
/* alchemy backgrounds */
.alchemy-header, 
.alchemy th {
	background-color: hsl(267, 57%, 65%); /* medium purple */
}
.alchemy-body,
.alchemy td {
	background-color: hsl(51, 100%, 81%); /* light gold */
}
.alchemy-header-alt, 
tr.alchemy-alt th {
	background-color: hsl(173, 100%, 35%); /* teal */
}
.alchemy-text-alt,
.alchemy-text-alt a,
.alchemy-text-alt span.active-category-link {
	color: hsl(173, 100%, 35%); /* teal */
}
/* alchemy text */
.alchemy-text-header,
.alchemy th,
.alchemy th > a,
tr.alchemy-alt th {
	color: white;
}
/* light purple as alternative for body color */
.alchemy-body-alt {
	background-color: hsl(267, 57%, 85%); /* light purple */
}
/* 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 */
}
/* extra class to give tables (thin) dark purple borders (optional because teal tables shouldn't get them) */
.alchemy-border th,
.alchemy-border td {
	border: 1px solid hsl(267, 57%, 40%); /* dark purple */
}

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

/* ---------- 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 th {
	background-color: hsl(45, 62%, 83%); /* medium bone */
}
.bonecraft-body,
.bonecraft td {
	background-color: hsl(0, 0%, 96%); /* light bone */
}
.bonecraft-header-alt, 
tr.bonecraft-alt th {
	background-color: hsl(31, 42%, 75%); /* earthy brown */
}
/* light brown as alternative for body color */
.bonecraft-body-alt {
	background-color: hsl(0, 0%, 96%); /* light bone atm */
}
/* woodworking 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: hsl(45, 65%, 52%); /* dark gold */
}
.goldsmithing-body,
.goldsmithing-table td, 
tr.goldsmithing-table td {
	background-color: hsl(45, 65%, 92%); /* light gold */
}
.goldsmithing-header-alt, 
.goldsmithing-table-alt th,
tr.goldsmithing-table-alt th {
	background-color: hsl(219, 94%, 34%); /* 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: hsl(45, 65%, 80%); /* medium gold */
}
/* goldsmithing text */
.goldsmithing-text-alt,
.goldsmithing-text-alt a,
.goldsmithing-text-alt span.active-category-link {
	color: hsl(219, 94%, 34%); /* 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 hsl(45, 65%, 52%); /* dark gold */
}