The Sunbreeze Festival 2024 is here!
MediaWiki:Colors.css
From HorizonXI Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
: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%); --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%); /* 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%); } /* || 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 { background-color: var(--woodworking-green); } /* light brown as alternative for body color */ .woodworking-body-alt, .woodworking-table-alt td, tr.woodworking-table-alt td { background-color: var(--woodworking-light-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 ---------------*/ /* 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); } /* ------------ 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 { background-color: var(--clothcraft-light-purple); } .clothcraft-body, .clothcraft-table td, .clothcraft-table td { background-color: var(--clothcraft-lightest-purple); } .clothcraft-header-alt, .clothcraft-table-alt th, tr.clothcraft-table-alt th { background-color: var(--clothcraft-dark-purple); } .clothcraft-body-alt, .clothcraft-table-alt td, tr.clothcraft-table-alt td { 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 ---------------*/