Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
mNo edit summary |
m (→CSS Classes) |
||
Line 5: | Line 5: | ||
* Background - bg example: orangebg | * Background - bg example: orangebg | ||
* Border - bd example: orangebd | * Border - bd example: orangebd | ||
* Color classes can prepend a prefix 'm' to render the 'muted' color with 50% opacity | * 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 | |||
Invoke by using (for example): | Invoke by using (for example): | ||
: <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight> | : <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight> | ||
: <syntaxhighlight lang="HTML"><span class="morangebg">Class for orange 'muted' background</span></syntaxhighlight> | |||
====Classic==== | ====Classic==== |
Revision as of 17:40, September 20, 2021
CSS Classes[edit | edit source]
Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes should be 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
Invoke by using (for example):
<span class="orangetx">Class for orange text</span>
<span class="morangebg">Class for orange 'muted' background</span>
Classic[edit | edit source]
Color | Hex | CSS Class (text example) | Template:Fc Keywords |
---|---|---|---|
magenta | #d96dc9 | (m)magenttx | magenta |
purple | #aa88e8 | (m)purpletx | purple, dev |
blue | #64a5e3 | (m)bluetx | blue, anotice |
green | #4bb073 | (m)greentx | green |
chartreuse | #9ead48 | (m)chartrtx | chartr, bug |
yellow | #e0b438 | (m)yellowtx | yellow, issue |
salmon | #daaa99 | (m)salmontx | salmon, instruction |
orange | #d89c4e | (m)orangetx | orange |
red | #ee7a72 | (m)redtx | red, rwarning, warn |
highlight | #ddd | hltx | highlight, brighter |
dim | #888 | dimx | dimmer, dim |
Dark[edit | edit source]
Color | Hex | CSS Class (text example) | Template:Fc Keywords |
---|---|---|---|
magenta | #ce56bf | (m)magenttx | magenta |
purple | #a07fdf | (m)purpletx | purple, dev |
blue | #5c8dd7 | (m)bluetx | blue, notice |
green | #43a86b | (m)greentx | green |
chartreuse | #96a13f | (m)chartrtx | chartr, bug |
yellow | #d6b026 | (m)yellowtx | yellow, issue |
salmon | #d0a08f | (m)salmontx | salmon, instruction |
orange | #d09446 | (m)orangetx | orange |
red | #e6716a | (m)redtx | red, warning, warn |
highlight | #d8d8d8 | hltx | highlight, brighter |
dim | #888 | dimx | dimmer, dim |
Light[edit | edit source]
Color | Hex | CSS Class (text example) | Template:Fc Keywords |
---|---|---|---|
magenta | #d96dc9 | (m)magenttx | magenta |
purple | #9978d8 | (m)purpletx | purple, dev |
blue | #5c8dd6 | (m)bluetx | blue, notice |
green | #3fa963 | (m)greentx | green |
chartreuse | #96a13f | (m)chartrtx | chartr, bug |
yellow | #d0a91a | (m)yellowtx | yellow, issue |
salmon | #c49584 | (m)salmontx | salmon, instruction |
orange | #cc9042 | (m)orangetx | orange |
red | #e6716a | (m)redtx | red, warning, warn |
highlight | #333 | hltx | highlight, brighter |
dimmer | #888 | dimx | dimmer, dim |