Template:Themes.css
From BIONICLEsector01
/* colors sourced from http://ryanhowerter.net/colors */
/***** FIRE *****/
/* primary: bright red; secondary: flame yellowish orange; text: white */
.theme-color-fire.theme-primary-background,
.theme-color-fire .theme-primary-background {
background-color: #b40000;
text-shadow: 0 0 4px #b40000;
}
.theme-color-fire.theme-secondary-background,
.theme-color-fire .theme-secondary-background,
.theme-color-fire::after {
background-color: #fcac00;
}
.theme-color-fire,
.theme-color-fire a,
.theme-color-fire hr {
color: #f4f4f4;
}
/***** WATER *****/
/* primary: bright blue; secondary: medium blue; text: white */
.theme-color-water.theme-primary-background,
.theme-color-water .theme-primary-background {
background-color: #1e5aa8;
text-shadow: 0 0 4px #1e5aa8;
}
.theme-color-water.theme-secondary-background,
.theme-color-water .theme-secondary-background,
.theme-color-water::after {
background-color: #7396c8;
}
.theme-color-water,
.theme-color-water a,
.theme-color-water hr {
color: #f4f4f4;
}
/***** AIR *****/
/* primary: green; secondary: bright yellowish green; text: white */
.theme-color-air.theme-primary-background,
.theme-color-air .theme-primary-background {
background-color: #00852b;
text-shadow: 0 0 4px #00852b;
}
.theme-color-air.theme-secondary-background,
.theme-color-air .theme-secondary-background,
.theme-color-air::after {
background-color: #a5ca18;
}
.theme-color-air,
.theme-color-air a,
.theme-color-air hr {
color: #f4f4f4;
}
/***** STONE *****/
/* primary: brown; secondary: tan; text: white */
.theme-color-stone.theme-primary-background,
.theme-color-stone .theme-primary-background {
background-color: #543324;
text-shadow: 0 0 4px #543324;
}
.theme-color-stone.theme-secondary-background,
.theme-color-stone .theme-secondary-background,
.theme-color-stone::after {
background-color: #b0a06f;
}
.theme-color-stone,
.theme-color-stone a,
.theme-color-stone hr {
color: #f4f4f4;
}
/***** Earth *****/
/* primary: black; secondary: dark stone grey; text: white */
.theme-color-earth.theme-primary-background,
.theme-color-earth .theme-primary-background {
background-color: #1b2a34;
text-shadow: 0 0 4px #1b2a34;
}
.theme-color-earth.theme-secondary-background,
.theme-color-earth .theme-secondary-background,
.theme-color-earth::after {
background-color: #646464;
}
.theme-color-earth,
.theme-color-earth a,
.theme-color-earth hr {
color: #f4f4f4;
}
/***** Ice *****/
/* primary: white; secondary: light stone grey; text: black */
.theme-color-ice.theme-primary-background,
.theme-color-ice .theme-primary-background {
background-color: #f4f4f4;
text-shadow: 0 0 4px #f4f4f4;
}
.theme-color-ice.theme-secondary-background,
.theme-color-ice .theme-secondary-background,
.theme-color-ice::after {
background-color: #c8c8c8;
}
.theme-color-ice,
.theme-color-ice a,
.theme-color-ice hr {
color: #1b2a34;
}
/***** Light *****/
/* primary: metallic white; secondary: metalized gold; text: black */
.theme-color-light.theme-primary-background,
.theme-color-light .theme-primary-background {
background-color: #f6f2df;
text-shadow: 0 0 4px #f6f2df;
}
.theme-color-light.theme-secondary-background,
.theme-color-light .theme-secondary-background,
.theme-color-light::after {
background-color: #dfc176;
}
.theme-color-light,
.theme-color-light a,
.theme-color-light hr {
color: #1b2a34;
}
/***** Shadow *****/
/* primary: metallic black; secondary: dark red; text: white */
.theme-color-shadow.theme-primary-background,
.theme-color-shadow .theme-primary-background {
background-color: #0a1327;
text-shadow: 0 0 4px #0a1327;
}
.theme-color-shadow.theme-secondary-background,
.theme-color-shadow .theme-secondary-background,
.theme-color-shadow::after {
background-color: #720012;
}
.theme-color-shadow,
.theme-color-shadow a,
.theme-color-shadow hr {
color: #f4f4f4;
}
/***** Sonics *****/
/* primary: medium stone grey; secondary: light stone grey; text: black */
.theme-color-sonics.theme-primary-background,
.theme-color-sonics .theme-primary-background {
background-color: #969696;
text-shadow: 0 0 4px #969696;
}
.theme-color-sonics.theme-secondary-background,
.theme-color-sonics .theme-secondary-background,
.theme-color-sonics::after {
background-color: #c8c8c8;
}
.theme-color-sonics,
.theme-color-sonics a,
.theme-color-sonics hr {
color: #1b2a34;
}
/***** Gravity *****/
/* primary: bright violet; secondary: black; text: white */
.theme-color-gravity.theme-primary-background,
.theme-color-gravity .theme-primary-background {
background-color: #671fa1;
text-shadow: 0 0 4px #671fa1;
}
.theme-color-gravity.theme-secondary-background,
.theme-color-gravity .theme-secondary-background,
.theme-color-gravity::after {
background-color: #0a1327;
}
.theme-color-gravity,
.theme-color-gravity a,
.theme-color-gravity hr {
color: #f4f4f4;
}
/***** Plasma *****/
/* primary: flame yellowish orange; secondary: white; text: black */
.theme-color-plasma.theme-primary-background,
.theme-color-plasma .theme-primary-background {
background-color: #fcac00;
text-shadow: 0 0 4px #fcac00;
}
.theme-color-plasma.theme-secondary-background,
.theme-color-plasma .theme-secondary-background,
.theme-color-plasma::after {
background-color: #f4f4f4;
}
.theme-color-plasma,
.theme-color-plasma a,
.theme-color-plasma hr {
color: #1b2a34;
}
/***** Magnetism *****/
/* primary: metallic dark grey; secondary: black; text: white */
.theme-color-magnetism.theme-primary-background,
.theme-color-magnetism .theme-primary-background {
background-color: #484d48;
text-shadow: 0 0 4px #484d48;
}
.theme-color-magnetism.theme-secondary-background,
.theme-color-magnetism .theme-secondary-background,
.theme-color-magnetism::after {
background-color: #0a1327;
}
.theme-color-magnetism,
.theme-color-magnetism a,
.theme-color-magnetism hr {
color: #f4f4f4;
}
/***** Jungle *****/
/* primary: bright bluish green; secondary: bright blue; text: white */
.theme-color-jungle.theme-primary-background,
.theme-color-jungle .theme-primary-background {
background-color: #069d9f;
text-shadow: 0 0 4px #069d9f;
}
.theme-color-jungle.theme-secondary-background,
.theme-color-jungle .theme-secondary-background,
.theme-color-jungle::after {
background-color: #1e5aa8;
}
.theme-color-jungle,
.theme-color-jungle a,
.theme-color-jungle hr {
color: #f4f4f4;
}
/***** Lightning *****/
/* primary: transparent fluorescent blue; secondary: white; text: black */
.theme-color-lightning.theme-primary-background,
.theme-color-lightning .theme-primary-background {
background-color: #d0e5ff;
text-shadow: 0 0 4px #d0e5ff;
}
.theme-color-lightning.theme-secondary-background,
.theme-color-lightning .theme-secondary-background,
.theme-color-lightning::after {
background-color: #f4f4f4;
}
.theme-color-lightning,
.theme-color-lightning a,
.theme-color-lightning hr {
color: #1b2a34;
}
/***** Iron *****/
/* primary: warm gold; secondary: dark orange; text: white */
.theme-color-iron.theme-primary-background,
.theme-color-iron .theme-primary-background {
background-color: #aa7f2e;
text-shadow: 0 0 4px #aa7f2e;
}
.theme-color-iron.theme-secondary-background,
.theme-color-iron .theme-secondary-background,
.theme-color-iron::after {
background-color: #91501c;
}
.theme-color-iron,
.theme-color-iron a,
.theme-color-iron hr {
color: #f4f4f4;
}
/***** Psionics *****/
/* primary: dark blue; secondary: warm gold; text: white */
.theme-color-psionics.theme-primary-background,
.theme-color-psionics .theme-primary-background {
background-color: #19325a;
text-shadow: 0 0 4px #19325a;
}
.theme-color-psionics.theme-secondary-background,
.theme-color-psionics .theme-secondary-background,
.theme-color-psionics::after {
background-color: #aa7f2e;
}
.theme-color-psionics,
.theme-color-psionics a,
.theme-color-psionics hr {
color: #f4f4f4;
}