MediaWiki:Colors.css: Difference between revisions

Latest revision as of 13:13, 2 October 2024

: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;
	
	/* mob colors */
	--mobs-color-darkest: hsl(235, 90%, 25%);
	--mobs-color-dark: hsl(235, 90%, 75%);
	--mobs-color-medium-light: hsl(235, 90%, 90%);
	--mobs-color-light: hsl(235, 90%, 95%);
	
	--nms-color-darkest: hsl(0, 90%, 25%);
	--nms-color-dark: hsl(0, 90%, 75%);
	--nms-color-medium-light: hsl(0, 90%, 90%);
	--nms-color-light: hsl(0, 90%, 95%);
	
	
	/* goldsmithing theme: gold with blue jewels */
	--goldsmithing-dark-gold: hsl(45, 65%, 52%);
	/* --goldsmithing-medium-gold: hsl(45, 65%, 80%); */ /* not used */
	--goldsmithing-light-gold: hsl(45, 65%, 92%);
	--goldsmithing-blue: hsl(219, 94%, 34%);
	
	/* leathercraft theme: leather */
	--leathercraft-saddlebrown: hsl(25, 76%, 31%);
	--leathercraft-peru: hsl(30, 59%, 53%);
	--leathercraft-tan: hsl(34, 44%, 69%);
	
	/* 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%);
	
	/* woodworking theme: wood, grass and earth */
	--woodworking-lightest-brown: hsl(32, 57%, 91%);
	--woodworking-light-brown: hsl(32, 57%, 80%);
	--woodworking-dark-brown: hsl(32, 57%, 44%);
	--woodworking-darkest-brown: hsl(32, 57%, 30%);
	--woodworking-green: hsl(78, 86%, 30%);
	
	/* bonecraft theme: bone and earth */
	--bonecraft-light-beige: hsl(45, 62%, 83%);
	--bonecraft-lightest-beige: hsl(0, 0%, 96%);
	--bonecraft-brown: hsl(31, 42%, 75%);
	
	/* smithing theme: iron and fire */
	--smithing-light-grey: hsl(206, 10%, 87%);
	--smithing-grey: hsl(0, 3%, 63%);
	--smithing-red: hsl(3, 86%, 48%);
	
	/* clothcraft theme: lilac and cotton */
	--clothcraft-light-purple: hsl(300, 26%, 87%);
	--clothcraft-dark-purple: hsl(300, 17%, 60%);
	--clothcraft-lightest-purple: hsl(342, 12%, 92%);
	
	/* fishing theme: water, water, water */
	--fishing-lightest-blue: hsl(235, 100%, 97%);
	--fishing-light-blue: hsl(200, 100%, 90%);
	--fishing-dark-blue: hsl(207, 69%, 60%);
	--fishing-teal: hsl(185, 93%, 65%);
	
}

/* || 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);
}
.alchemy-table td,
tr.alchemy-table td {
	background-color: var(--alchemy-lightest-purple);
}
.alchemy-table-border th, 
.alchemy-table-border td, 
tr.alchemy-table-border th,
tr.alchemy-table-border td {
	border: 1px solid var(--alchemy-dark-purple);
}

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

/* alchemy divs */
.alchemy-purple {
	background-color: var(--alchemy-medium-purple);
}
.alchemy-gold {
	background-color: var(--alchemy-light-gold);
}
.alchemy-teal {
	background-color: var(--alchemy-teal);
}
.alchemy-purple-light {
	background-color: var(--alchemy-light-purple);
}
/* border rules for dark borders */
.alchemy-border,
.alchemy-border.container {
	border: 1px solid var(--alchemy-dark-purple);
}
.alchemy-border-thick,
.alchemy-border-thick.container {
	border: 2px solid var(--alchemy-dark-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 */
}





/* ---------- Woodworking ---------- */
/* woodworking backgrounds*/
.woodworking-header, 
.woodworking-table th, 
tr.woodworking-table th {
	background-color: var(--woodworking-dark-brown);
}
.woodworking-body,
.woodworking-table td,
tr.woodworking-table td {
	background-color: var(--woodworking-lightest-brown);
}
/* grass green as alternative header color */
.woodworking-header-alt, 
.woodworking-table-alt th, 
tr.woodworking-table-alt th,
th.woodworking-table-alt {
	background-color: var(--woodworking-green);
}
/* light brown as alternative for body color */
.woodworking-body-alt, 
.woodworking-table-alt td, 
tr.woodworking-table-alt td,
td.woodworking-table-alt {
	background-color: var(--woodworking-lightest-brown);
}
/* woodworking text */
.woodworking-text-alt,
.woodworking-text-alt a,
.woodworking-text-alt span.active-category-link {
	color: var(--woodworking-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 var(--woodworking-darkest-brown);
}

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

/* ----------  bonecraft ---------- */
.bonecraft-header, 
.bonecraft-table th,
tr.bonecraft-table th {
	background-color: var(--bonecraft-light-beige);
}
.bonecraft-body,
.bonecraft-table td,
.bonecraft-table td {
	background-color: var(--bonecraft-lightest-beige);
}
.bonecraft-header-alt, 
.bonecraft-table-alt th,
tr.bonecraft-table-alt th {
	background-color: var(--bonecraft-brown);
}
.bonecraft-body-alt, 
.bonecraft-table-alt td,
tr.bonecraft-table-alt td {
	background-color: var(--bonecraft-lightest-beige);
}
/* bonecraft text */
.bonecraft-text-alt,
.bonecraft-text-alt a,
.bonecraft-text-alt span.active-category-link {
	color: var(--bonecraft-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 var(--bonecraft-light-beige);
}

/* ------------- end of bonecraft ---------------*/

/* ----------  leathercraft ---------- */
.leathercraft-header, 
.leathercraft-table th,
tr.leathercraft-table th {
	background-color: var(--leathercraft-saddlebrown);
}
.leathercraft-body,
.leathercraft-table td,
.leathercraft-table td {
	background-color: var(--leathercraft-tan);
}
.leathercraft-header-alt, 
.leathercraft-table-alt th,
tr.leathercraft-table-alt th {
	background-color: var(--leathercraft-peru);
}
.leathercraft-body-alt, 
.leathercraft-table-alt td,
tr.leathercraft-table-alt td {
	background-color: var(--leathercraft-tan);
}
/* leathercraft text */
.leathercraft-text-alt,
.leathercraft-text-alt a,
.leathercraft-text-alt span.active-category-link {
	color: var(--leathercraft-peru);
}
/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.leathercraft-header.container, 
.leathercraft-header-alt.container, 
.leathercraft-body.container, 
.leathercraft-body-alt.container, 
.leathercraft-border-thick th,
.leathercraft-border-thick td {
	border: 2px solid var(--leathercraft-saddlebrown);
}

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

/* ------------- end of leathercraft ---------------*/
/* ------------- start Goldsmithing --------------- */

/* 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-light-gold); /* light 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 */
}

/* ---------------------- end Goldsmithing --------------------- */


/* 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);
}

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



/* ----------  clothcraft ---------- */
.clothcraft-header, 
.clothcraft-table th,
tr.clothcraft-table th,
th.clothcraft-table {
	background-color: var(--clothcraft-light-purple);
}
.clothcraft-body,
.clothcraft-table td,
.clothcraft-table td,
td.clothcraft-table {
	background-color: var(--clothcraft-lightest-purple);
}
.clothcraft-header-alt, 
.clothcraft-table-alt th,
tr.clothcraft-table-alt th,
th.clothcraft-table-alt {
	background-color: var(--clothcraft-dark-purple);
}
.clothcraft-body-alt, 
.clothcraft-table-alt td,
tr.clothcraft-table-alt td,
td.clothcraft-table-alt {
	background-color: var(--clothcraft-lightest-purple);
}
/* clothcraft text */
.clothcraft-text-alt,
.clothcraft-text-alt a,
.clothcraft-text-alt span.active-category-link {
	color: var(--clothcraft-dark-purple);
}
/* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */
.clothcraft-header.container, 
.clothcraft-body.container, 
.clothcraft-body-alt.container, 
.clothcraft-border-thick th,
.clothcraft-border-thick td {
	border: 2px solid var(--clothcraft-light-purple);
}

/* ------------- end of clothcraft ---------------*/


/* ------------- fishing ---------------*/
/* fishing backgrounds */
.fishing-header,
.fishing-table th, 
tr.fishing-table th {
	background-color: var(--fishing-dark-blue); /* dark blue */
}
.fishing-body,
.fishing-table td, 
tr.fishing-table td {
	background-color: var(--fishing-lightest-blue); /* lightest blue */
}
.fishing-header-alt, 
.fishing-table-alt th,
tr.fishing-table-alt th {
	background-color: var(--fishing-light-blue); /* light blue */
}
.fishing-body-alt, 
.fishing-table-alt td, 
tr.fishing-table-alt td {
	background-color: var(--fishing-lightest-blue); /* lightest blue */
}
/* fishing text */
.fishing-text-alt,
.fishing-text-alt a,
.fishing-text-alt span.active-category-link {
	color: var(--fishing-dark-blue); /* dark blue font */
}

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