Project:Site Color Palette

From Step Mods | Change The Game
Delta c.png

Site Color Palette

Colors and classes by theme for use on the Step platform

by: Step Modifications  | Forum Topic

CSS Classes

Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes are used as indicated below. Each uses the color name (or shortened name) with 'type' suffix:

  • Text - tx - example: orangetx
  • Background - bg example: orangebg
  • Border - bd example: orangebd
  • Color classes can prepend a prefix 'm' to render the 'muted' color with 50% opacity
    • Does not apply to 'brighter'/'dimmer'
    • Does not apply to text colors

NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.

Invoke by using HTML (for example):

<span class="orangetx">Class for orange text</span>
<span class="morangebg">Class for orange 'muted' background</span>

Text Colors
On pages where guide template-call thresholds are limiting (Mod and Guide pages), it's important to use the HTML methods mentioned previously for coloring text. Everywhere else, it's more convenient to invoke Template:Fc to color text.

{{Fc|orange|Use the Fc template to make orange text}}

Classic

Color Hex CSS Class Examples Template:Fc Keywords
magenta #d96dc9 (m)magentbd magenta
purple #aa88e8 (m)purplebd purple, dev
blue #64a5e3 (m)bluebd blue, anotice
green #4bb073 (m)greenbd green
chartreuse #9ead48 (m)chartrbd chartr, bug
yellow #e0b438 (m)yellowbd yellow, issue
salmon #daaa99 (m)salmonbd salmon, instruction
orange #f09047 (m)orangebd orange
red #ff7077 (m)redbd red, warning, warn
highlight #ddd hltx highlight, brighter
dim #888 dimtx dimmer, dim



Dark

Color Hex CSS Class Examples Template:Fc Keywords
magenta #ce56bf (m)magentbd magenta
purple #a07fdf (m)purplebd purple, dev
blue #5c8dd7 (m)bluebd blue, notice
green #43a86b (m)greenbd green
chartreuse #96a13f (m)chartrbd chartr, bug
yellow #d6b026 (m)yellowbd yellow, issue
salmon #d0a08f (m)salmonbd salmon, instruction
orange #f08740 (m)orangebd orange
red #f76770 (m)redbd red, warning, warn
highlight #d8d8d8 hltx highlight, brighter
dim #888 dimx dimmer, dim



Light (theme retired)

Color Hex CSS Class Examples Template:Fc Keywords
magenta #d96dc9 (m)magentbd magenta
purple #9978d8 (m)purplebd purple, dev
blue #5c8dd6 (m)bluebd blue, notice
green #3fa963 (m)greenbd green
chartreuse #96a13f (m)chartrbd chartr, bug
yellow #d0a91a (m)yellowbd yellow, issue
salmon #c49584 (m)salmonbd salmon, instruction
orange #f08740 (m)orangebd orange
red #f76770 (m)redbd red, warning, warn
highlight #333 hltx highlight, brighter
dimmer #888 dimx dimmer, dim