MediaWiki:Colors.css: Difference between revisions
From HorizonXI Wiki
Starfox9507 (talk | contribs) No edit summary |
(css variables for goldsmithing colors) |
||
Line 1: | Line 1: | ||
:root { | :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%); | |||
} | } | ||
Line 148: | Line 148: | ||
.goldsmithing-table th, | .goldsmithing-table th, | ||
tr.goldsmithing-table th { | tr.goldsmithing-table th { | ||
background-color: | background-color: var(--goldsmithing-dark-gold); /* dark gold */ | ||
} | } | ||
.goldsmithing-body, | .goldsmithing-body, | ||
.goldsmithing-table td, | .goldsmithing-table td, | ||
tr.goldsmithing-table td { | tr.goldsmithing-table td { | ||
background-color: | background-color: var(--goldsmithing-light-gold); /* light gold */ | ||
} | } | ||
.goldsmithing-header-alt, | .goldsmithing-header-alt, | ||
.goldsmithing-table-alt th, | .goldsmithing-table-alt th, | ||
tr.goldsmithing-table-alt th { | tr.goldsmithing-table-alt th { | ||
background-color: | background-color: var(--goldsmithing-blue); /* blue jewels */ | ||
color: white; /* white font because of too dark background */ | color: white; /* white font because of too dark background */ | ||
} | } | ||
Line 164: | Line 164: | ||
.goldsmithing-table-alt td, | .goldsmithing-table-alt td, | ||
tr.goldsmithing-table-alt td { | tr.goldsmithing-table-alt td { | ||
background-color: | background-color: var(--goldsmithing-medium-gold); /* medium gold */ | ||
} | } | ||
/* goldsmithing text */ | /* goldsmithing text */ | ||
Line 170: | Line 170: | ||
.goldsmithing-text-alt a, | .goldsmithing-text-alt a, | ||
.goldsmithing-text-alt span.active-category-link { | .goldsmithing-text-alt span.active-category-link { | ||
color: | 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 */ | /* border rule for (thick) dark borders for header, body and body-alt if they are containers. also for optional for special tables */ | ||
Line 178: | Line 178: | ||
.goldsmithing-border-thick th, | .goldsmithing-border-thick th, | ||
.goldsmithing-border-thick td { | .goldsmithing-border-thick td { | ||
border: 2px solid | border: 2px solid var(--goldsmithing-dark-gold); /* dark gold */ | ||
} | } |
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 */ }