Project:Site Color Palette: Difference between revisions

From Step Mods | Change The Game
mNo edit summary
 
(52 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Reference]][[Category:Step Wiki Guides]]
{{PageTitle|title=Site Color Palette|subtitle=Colors and classes by theme for use on the Step platform|author=Step Modifications|forumtid=15793}}[[Category:Administration]][[Category:Reference]][[Category:Step Wiki Guides]]{{TOC}}
===CSS Classes===
===CSS Classes===
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:
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:
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
** Does not apply to 'brighter'/'dimmer'
** Does not apply to text colors
{{Fc|salmon|''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 (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====
<div class=p-3 style="background: #373f49">
{| class="wikitable"
{| class="wikitable"
! Color
! Color
! Hex
! Hex
! CSS Class
! CSS Class Examples
! Template:Fc Keywords
! Template:Fc Keywords
|-
|-
| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta
| style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta
|-
|-
| {{Fc|purple|purple}} || #aa88e8 || purpletx || purple
| style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m)purplebd || purple, dev
|-
|-
| {{Fc|blue|blue}} || #64a5e3 || bluetx || blue, addition, enhancement, confirmation
| style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m)bluebd || blue, anotice
|-
|-
| {{Fc|green|green}} || #4bb073 || greentx || green, fix, functional, relevant
| style="background: #373f49; color:#4bb073" | green || #4bb073 || (m)greenbd || green
|-
|-
| {{Fc|chartr|chartreuse}} || #9ead48 || chartrtx || chartr
| style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m)chartrbd || chartr, bug
|-
|-
| {{Fc|yellow|yellow}} || #e0b438 || yellowtx || yellow, issue, unknown
| style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m)yellowbd || yellow, issue
|-
|-
| {{Fc|salmon|salmon}} || #daaa99 || salmontx || salmon, instruction
| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction
|-
|-
| {{Fc|orange|orange}} || #d89c4e || orangetx || orange, change, modification
| style="background: #373f49; color:#f09047" | orange || #f09047 || (m)orangebd || orange
|-
|-
| {{Fc|red|red}} || #ee7a72 || redtx || red, removal, non-functional, irrelevant, warning
| style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, rwarning, warn
|-
|-
| {{Fc|highlight|highlight}} || #dddddd || hltx || highlight, important
| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter
|-
|-
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
| style="background: #373f49; color:#888" | dim || #888 || dimtx || dimmer, dim
|}
|}


Line 48: Line 54:
<li><span style="display:inline-block; vertical-align:middle; background:#e0b438; 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; background:#e0b438; 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; background:#daaa99; 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; background:#daaa99; 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; background:#d89c4e; 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; background:#f09047; 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; background:#ee7a72; 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; background:#ff7077; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
Line 55: Line 61:
<div>
<div>
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d96dc9; 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; background:#d96dc950; 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 #aa88e8; 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; background:#aa88e850; 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 #64a5e3; 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; background:#64a5e350; 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 #4bb073; 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; background:#4bb07350; 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 #9ead48; 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; background:#9ead4850; 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 #e0b438; 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; background:#e0b43850; 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 #daaa99; 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; background:#daaa9950; 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 #d89c4e; 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; background:#f0904750; 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>
<li><span style="display:inline-block; vertical-align:middle; background:#ff707750; 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
! Hex
! Hex
! CSS Class
! CSS Class Examples
! Template:Fc Keywords
! Template:Fc Keywords
|-
|-
| {{Fc|magenta|magenta}} || #ce56bf || magenttx || magenta
| style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m)magentbd || magenta
|-
|-
| {{Fc|purple|purple}} || #a07fdf || purpletx || purple
| style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m)purplebd || purple, dev
|-
|-
| {{Fc|blue|blue}} || #5c8dd7 || bluetx || blue, addition, enhancement, confirmation
| style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m)bluebd || blue, notice
|-
|-
| {{Fc|green|green}} || #43a86b || greentx || green, fix, functional, relevant
| style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m)greenbd || green
|-
|-
| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr
| style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug
|-
|-
| {{Fc|yellow|yellow}} || #d6b026 || yellowtx || yellow, issue, unknown
| style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m)yellowbd || yellow, issue
|-
|-
| {{Fc|salmon|salmon}} || #d0a08f || salmontx || salmon, instruction
| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction
|-
|-
| {{Fc|orange|orange}} || #d09446 || orangetx || orange, change, modification
| style="background: #2a2a2f; color:#f08740" | orange || #f08740 || (m)orangebd || orange
|-
|-
| {{Fc|red|red}} || #e6716a || redtx || red, removal, non-functional, irrelevant, warning
| style="background: #2a2a2f; color:#f76770" | red || #f76770 || (m)redbd || red, warning, warn
|-
|-
| {{Fc|highlight|highlight}} || #d8d8d8 || hltx || highlight, important
| style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter
|-
|-
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
| style="background: #2a2a2f; color:#888" | dim || #888 || dimx || dimmer, dim
|}
|}


Line 107: Line 115:
<li><span style="display:inline-block; vertical-align:middle; background:#d6b026; 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; background:#d6b026; 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; background:#d0a08f; 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; background:#d0a08f; 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; background:#d09446; 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; background:#f08740; 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; background:#e6716a; 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; background:#f76770; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
Line 114: Line 122:
<div>
<div>
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<li><span style="display:inline-block; vertical-align:middle; border:2px solid #ce56bf; 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; background:#ce56bf50; 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 #a07fdf; 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; background:#a07fdf50; 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 #5c8dd7; 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; background:#5c8dd750; 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 #43a86b; 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; background:#43a86b50; 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 #96a13f; 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; background:#96a13f50; 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 #d6b026; 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; background:#d6b02650; 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 #d0a08f; 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; background:#d0a08f50; 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 #d09446; 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; background:#f0874050; 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>
<li><span style="display:inline-block; vertical-align:middle; background:#f7677050; 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 (theme retired)====
<div class=p3 style="background: #f6f6f9">
<div class=p-3 style="background: #fffefd">
{| class="wikitable"
{| class="wikitable"
! Color
! Color
! Hex
! Hex
! CSS Class
! CSS Class Examples
! Template:Fc Keywords
! Template:Fc Keywords
|-
|-
| {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta
| style="background: #fffefd; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta
|-
|-
| {{Fc|purple|purple}} || #9978d8 || purpletx || purple
| style="background: #fffefd; color:#9978d8" | purple || #9978d8 || (m)purplebd || purple, dev
|-
|-
| {{Fc|blue|blue}} || #5c8dd6 || bluetx || blue, addition, enhancement, confirmation
| style="background: #fffefd; color:#5c8dd6" | blue || #5c8dd6 || (m)bluebd || blue, notice
|-
|-
| {{Fc|green|green}} || #3fa963 || greentx || green, fix, functional, relevant
| style="background: #fffefd; color:#3fa963" | green || #3fa963 || (m)greenbd || green
|-
|-
| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr
| style="background: #fffefd; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug
|-
|-
| {{Fc|yellow|yellow}} || #d0a91a || yellowtx || yellow, issue, unknown
| style="background: #fffefd; color:#d0a91a" | yellow || #d0a91a || (m)yellowbd || yellow, issue
|-
|-
| {{Fc|salmon|salmon}} || #c49584 || salmontx || salmon, instruction
| style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction
|-
|-
| {{Fc|orange|orange}} || #cc9042 || orangetx || orange, change, modification
| style="background: #fffefd; color:#f08740" | orange || #f08740 || (m)orangebd || orange
|-
|-
| {{Fc|red|red}} || #e6716a || redtx || red, removal, non-functional, irrelevant, warning
| style="background: #fffefd; color:#f76770" | red || #f76770 || (m)redbd || red, warning, warn
|-
|-
| {{Fc|highlight|highlight}} || #303030 || hltx || highlight, important
| style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter
|-
|-
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer
| style="background: #fffefd; color:#888" | dimmer || #888 || dimx || dimmer, dim
|}
|}


Line 167: Line 176:
<li><span style="display:inline-block; vertical-align:middle; background:#d0a91a; 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; background:#d0a91a; 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; background:#c49584; 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; background:#c49584; 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; background:#cc9042; 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; background:#f08740; 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; background:#e6716a; 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; background:#f76770; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
Line 174: Line 183:
<div>
<div>
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<li><span style="display:inline-block; vertical-align:middle; border:2px solid #d96dc9; 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; background:#d96dc950; 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 #9978d8; 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; background:#9978d850; 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 #5c8dd6; 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; background:#5c8dd650; 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 #3fa963; 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; background:#3fa96350; 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 #96a13f; 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; background:#96a13f50; 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 #d0a91a; 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; background:#d0a91a50; 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 #c49584; 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; background:#c4958450; 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 #cc9042; 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; background:#f0874050; 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>
<li><span style="display:inline-block; vertical-align:middle; background:#f7677050; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
</div>
</div>

Latest revision as of 15:33, September 29, 2023

Delta c.png

Site Color Palette

Colors and classes by theme for use on the Step platform

by: Step Modifications  | Forum Topic

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

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 (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 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, rwarning, warn
highlight #ddd hltx highlight, brighter
dim #888 dimtx dimmer, dim



Dark[edit | edit source]

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)[edit | edit source]

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