Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
m (→Light) |
m (→Light) |
||
Line 128: | Line 128: | ||
====Light==== | ====Light==== | ||
<div style="background: #f6f6f9"> | |||
{| class="wikitable" | |||
! Color | ! Color | ||
! Hex | ! Hex | ||
Line 183: | Line 184: | ||
<li><span style="display:inline-block; vertical-align:middle; border:2px solid #e6716a; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | <li><span style="display:inline-block; vertical-align:middle; border:2px solid #e6716a; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
</div> | |||
</div> | </div> |
Revision as of 16:55, 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
Invoke by using (for example):
<span class="orangetx">Class for orange text</span>
Classic[edit | edit source]
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #d96dc9 | magenttx | magenta |
purple | #aa88e8 | purpletx | purple |
blue | #64a5e3 | bluetx | blue, addition, enhancement, confirmation |
green | #4bb073 | greentx | green, fix, functional, relevant |
chartreuse | #9ead48 | chartrtx | chartr |
yellow | #e0b438 | yellowtx | yellow, issue, unknown |
salmon | #daaa99 | salmontx | salmon, instruction |
orange | #d89c4e | orangetx | orange, change, modification |
red | #ee7a72 | redtx | red, removal, non-functional, irrelevant, warning |
highlight | #dddddd | hltx | highlight, important |
dimmer | #888 | dimx | dimmer |
Dark[edit | edit source]
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #ce56bf | magenttx | magenta |
purple | #a07fdf | purpletx | purple |
blue | #5c8dd7 | bluetx | blue, addition, enhancement, confirmation |
green | #43a86b | greentx | green, fix, functional, relevant |
chartreuse | #96a13f | chartrtx | chartr |
yellow | #d6b026 | yellowtx | yellow, issue, unknown |
salmon | #d0a08f | salmontx | salmon, instruction |
orange | #d09446 | orangetx | orange, change, modification |
red | #e6716a | redtx | red, removal, non-functional, irrelevant, warning |
highlight | #d8d8d8 | hltx | highlight, important |
dimmer | #888 | dimx | dimmer |
Light[edit | edit source]
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #d96dc9 | magenttx | magenta |
purple | #9978d8 | purpletx | purple |
blue | #5c8dd6 | bluetx | blue, addition, enhancement, confirmation |
green | #3fa963 | greentx | green, fix, functional, relevant |
chartreuse | #96a13f | chartrtx | chartr |
yellow | #d0a91a | yellowtx | yellow, issue, unknown |
salmon | #c49584 | salmontx | salmon, instruction |
orange | #cc9042 | orangetx | orange, change, modification |
red | #e6716a | redtx | red, removal, non-functional, irrelevant, warning |
highlight | #303030 | hltx | highlight, important |
dimmer | #888 | dimx | dimmer |