Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
m (→Light) |
mNo edit summary |
||
Line 10: | Line 10: | ||
====Classic==== | ====Classic==== | ||
<div class=p-3 style="background: #373f49"> | |||
{| class="wikitable" | {| class="wikitable" | ||
! Color | ! Color | ||
Line 18: | Line 19: | ||
| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta | | {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta | ||
|- | |- | ||
| {{Fc|purple|purple}} || #aa88e8 || purpletx || purple | | {{Fc|purple|purple}} || #aa88e8 || purpletx || purple, dev | ||
|- | |- | ||
| {{Fc|blue|blue}} || #64a5e3 || bluetx || blue, | | {{Fc|blue|blue}} || #64a5e3 || bluetx || blue, anotice | ||
|- | |- | ||
| {{Fc|green|green}} || #4bb073 || greentx || green | | {{Fc|green|green}} || #4bb073 || greentx || green | ||
|- | |- | ||
| {{Fc|chartr|chartreuse}} || #9ead48 || chartrtx || chartr | | {{Fc|chartr|chartreuse}} || #9ead48 || chartrtx || chartr, bug | ||
|- | |- | ||
| {{Fc|yellow|yellow}} || #e0b438 || yellowtx || yellow, issue | | {{Fc|yellow|yellow}} || #e0b438 || yellowtx || yellow, issue | ||
|- | |- | ||
| {{Fc|salmon|salmon}} || #daaa99 || salmontx || salmon, instruction | | {{Fc|salmon|salmon}} || #daaa99 || salmontx || salmon, instruction | ||
|- | |- | ||
| {{Fc|orange|orange}} || #d89c4e || orangetx || orange | | {{Fc|orange|orange}} || #d89c4e || orangetx || orange | ||
|- | |- | ||
| {{Fc|red|red}} || #ee7a72 || redtx || red, | | {{Fc|red|red}} || #ee7a72 || redtx || red, rwarning, warn | ||
|- | |- | ||
| {{Fc|highlight|highlight}} || #dddddd || hltx || highlight, | | {{Fc|highlight|highlight}} || #dddddd || hltx || highlight, brighter | ||
|- | |- | ||
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer | | {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer, dim | ||
|} | |} | ||
Line 65: | Line 66: | ||
<li><span style="display:inline-block; vertical-align:middle; border:2px solid #ee7a72; 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 #ee7a72; background:#888888; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
</div> | |||
</div> | </div> | ||
<br /> | <br /> | ||
====Dark==== | ====Dark==== | ||
<div class=p-3 style="background: #2a2a2f"> | |||
{| class="wikitable" | {| class="wikitable" | ||
! Color | ! Color | ||
Line 77: | Line 80: | ||
| {{Fc|magenta|magenta}} || #ce56bf || magenttx || magenta | | {{Fc|magenta|magenta}} || #ce56bf || magenttx || magenta | ||
|- | |- | ||
| {{Fc|purple|purple}} || #a07fdf || purpletx || purple | | {{Fc|purple|purple}} || #a07fdf || purpletx || purple, dev | ||
|- | |- | ||
| {{Fc|blue|blue}} || #5c8dd7 || bluetx || blue, | | {{Fc|blue|blue}} || #5c8dd7 || bluetx || blue, notice | ||
|- | |- | ||
| {{Fc|green|green}} || #43a86b || greentx || green | | {{Fc|green|green}} || #43a86b || greentx || green | ||
|- | |- | ||
| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr | | {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr, bug | ||
|- | |- | ||
| {{Fc|yellow|yellow}} || #d6b026 || yellowtx || yellow, issue | | {{Fc|yellow|yellow}} || #d6b026 || yellowtx || yellow, issue | ||
|- | |- | ||
| {{Fc|salmon|salmon}} || #d0a08f || salmontx || salmon, instruction | | {{Fc|salmon|salmon}} || #d0a08f || salmontx || salmon, instruction | ||
|- | |- | ||
| {{Fc|orange|orange}} || #d09446 || orangetx || orange | | {{Fc|orange|orange}} || #d09446 || orangetx || orange | ||
|- | |- | ||
| {{Fc|red|red}} || #e6716a || redtx || red, | | {{Fc|red|red}} || #e6716a || redtx || red, warning, warn | ||
|- | |- | ||
| {{Fc|highlight|highlight}} || #d8d8d8 || hltx || highlight, | | {{Fc|highlight|highlight}} || #d8d8d8 || hltx || highlight, brighter | ||
|- | |- | ||
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer | | {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer, dim | ||
|} | |} | ||
Line 124: | Line 127: | ||
<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> | ||
<br /> | <br /> | ||
====Light==== | ====Light==== | ||
<div class=p-3 style="background: # | <div class=p-3 style="background: #fffefd"> | ||
{| class="wikitable" | {| class="wikitable" | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta | | {{Fc|magenta|magenta}} || #d96dc9 || (m)magenttx || magenta | ||
|- | |- | ||
| {{Fc|purple|purple}} || #9978d8 || purpletx || purple | | {{Fc|purple|purple}} || #9978d8 || (m)purpletx || purple, dev | ||
|- | |- | ||
| {{Fc|blue|blue}} || #5c8dd6 || bluetx || blue, | | {{Fc|blue|blue}} || #5c8dd6 || (m)bluetx || blue, notice | ||
|- | |- | ||
| {{Fc|green|green}} || #3fa963 || greentx || green | | {{Fc|green|green}} || #3fa963 || (m)greentx || green | ||
|- | |- | ||
| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr | | {{Fc|chartr|chartreuse}} || #96a13f || (m)chartrtx || chartr, bug | ||
|- | |- | ||
| {{Fc|yellow|yellow}} || #d0a91a || yellowtx || yellow, issue | | {{Fc|yellow|yellow}} || #d0a91a || (m)yellowtx || yellow, issue | ||
|- | |- | ||
| {{Fc|salmon|salmon}} || #c49584 || salmontx || salmon, instruction | | {{Fc|salmon|salmon}} || #c49584 || (m)salmontx || salmon, instruction | ||
|- | |- | ||
| {{Fc|orange|orange}} || #cc9042 || orangetx || orange | | {{Fc|orange|orange}} || #cc9042 || (m)orangetx || orange | ||
|- | |- | ||
| {{Fc|red|red}} || #e6716a || redtx || red, | | {{Fc|red|red}} || #e6716a || (m)redtx || red, warning, warn | ||
|- | |- | ||
| {{Fc|highlight|highlight}} || #303030 || hltx || highlight, | | {{Fc|highlight|highlight}} || #303030 || (m)hltx || highlight, brighter | ||
|- | |- | ||
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer | | {{Fc|dimmer|dimmer}} || #888 || (m)dimx || dimmer, dim | ||
|} | |} | ||
Revision as of 17:11, 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, dev |
blue | #64a5e3 | bluetx | blue, anotice |
green | #4bb073 | greentx | green |
chartreuse | #9ead48 | chartrtx | chartr, bug |
yellow | #e0b438 | yellowtx | yellow, issue |
salmon | #daaa99 | salmontx | salmon, instruction |
orange | #d89c4e | orangetx | orange |
red | #ee7a72 | redtx | red, rwarning, warn |
highlight | #dddddd | hltx | highlight, brighter |
dimmer | #888 | dimx | dimmer, dim |
Dark[edit | edit source]
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #ce56bf | magenttx | magenta |
purple | #a07fdf | purpletx | purple, dev |
blue | #5c8dd7 | bluetx | blue, notice |
green | #43a86b | greentx | green |
chartreuse | #96a13f | chartrtx | chartr, bug |
yellow | #d6b026 | yellowtx | yellow, issue |
salmon | #d0a08f | salmontx | salmon, instruction |
orange | #d09446 | orangetx | orange |
red | #e6716a | redtx | red, warning, warn |
highlight | #d8d8d8 | hltx | highlight, brighter |
dimmer | #888 | dimx | dimmer, dim |
Light[edit | edit source]
Color | Hex | CSS Class | 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 | #303030 | (m)hltx | highlight, brighter |
dimmer | #888 | (m)dimx | dimmer, dim |