Project:Site Color Palette: Difference between revisions

From Step Mods | Change The Game
(Created page with "===CSS Variables=== The following variables affect all themes by applying the theme-specific colors as indicated. :var(--clr-magenta) :var(--clr-purple) :var(--clr-blue) :var(...")
 
mNo edit summary
 
(71 intermediate revisions by 3 users not shown)
Line 1: Line 1:
===CSS Variables===
{{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}}
The following variables affect all themes by applying the theme-specific colors as indicated.
===CSS Classes===
:var(--clr-magenta)
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:
:var(--clr-purple)
* Text - tx - example: orangetx
:var(--clr-blue)
* Background - bg example: orangebg
:var(--clr-green)
* Border - bd example: orangebd
:var(--clr-chartreuse)
* Color classes can prepend a prefix 'm' to render the 'muted' color with 50% opacity
:var(--clr-yellow)
** Does not apply to 'brighter'/'dimmer'
:var(--clr-salmon)
** Does not apply to text colors
:var(--clr-orange)
{{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.''}}
:var(--clr-red)
 
:var(--text-pri-emph)
Invoke by using (for example):
: <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====
{{Fc|#d96dc9|magenta #d96dc9}}<br />
<div class=p-3 style="background: #373f49">
{{Fc|#aa88e8|purple #aa88e8}}<br />
{| class="wikitable"
{{Fc|#64a5e3|addition, enhancement, confirmation, blue #64a5e3}}<br />
! Color
{{Fc|#4bb073|fix, functional, relevant, green #4bb073}}<br />
! Hex
{{Fc|#9ead48|chartreuse #9ead48}}<br />
! CSS Class Examples
{{Fc|#e0b438|issue, unknown, yellow #e0b438}}<br />
! Template:Fc Keywords
{{Fc|#daaa99|instruction, ilheading<sup>1</sup>, salmon #daaa99}}<br />
|-
{{Fc|#d89c4e|change, modification, orange #d89c4e}}<br />
| style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta
{{Fc|#ee7a72|removal, non-functional, irrelevant, warning, red #ee7a72}}<br />
|-
{{Fc|#dddddd|important, highlight #dddddd }}<br />
| style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m)purplebd || purple, dev
|-
| style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m)bluebd || blue, anotice
|-
| style="background: #373f49; color:#4bb073" | green || #4bb073 || (m)greenbd || green
|-
| style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m)chartrbd || chartr, bug
|-
| style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m)yellowbd || yellow, issue
|-
| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction
|-
| style="background: #373f49; color:#f09047" | orange || #f09047 || (m)orangebd || orange
|-
| style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, rwarning, warn
|-
| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter
|-
| style="background: #373f49; color:#888" | dim || #888 || dimtx || dimmer, dim
|}
 
<div>
<div>
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<ul style="margin:0; padding:0; list-style: none; display: flex;">
Line 32: 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 39: 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====
{{Fc|#ce56bf|magenta #ce56bf}}<br />
<div class=p-3 style="background: #2a2a2f">
{{Fc|#a07fdf|purple #a07fdf}}<br />
{| class="wikitable"
{{Fc|#5c8dd7|addition, enhancement, confirmation, blue #5c8dd7}}<br />
! Color
{{Fc|#43a86b|fix, functional, relevant, green #43a86b}}<br />
! Hex
{{Fc|#96a13f|chartreuse #96a13f}}<br />
! CSS Class Examples
{{Fc|#d6b026|issue, unknown, yellow #d6b026}}<br />
! Template:Fc Keywords
{{Fc|#d0a08f|instruction, ilheading<sup>1</sup>, salmon #d0a08f}}<br />
|-
{{Fc|#d09446|change, modification, orange #d09446}}<br />
| style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m)magentbd || magenta
{{Fc|#e6716a|removal, non-functional, irrelevant, warning, red #e6716a}}<br />
|-
{{Fc|#d8d8d8|important, highlight #d8d8d8 }}<br />
| style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m)purplebd || purple, dev
|-
| style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m)bluebd || blue, notice
|-
| style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m)greenbd || green
|-
| style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug
|-
| style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m)yellowbd || yellow, issue
|-
| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction
|-
| style="background: #2a2a2f; color:#f08740" | orange || #f08740 || (m)orangebd || orange
|-
| style="background: #2a2a2f; color:#f76770" | red || #f76770 || (m)redbd || red, warning, warn
|-
| style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter
|-
| style="background: #2a2a2f; color:#888" | dim || #888 || dimx || dimmer, dim
|}
 
<div>
<div>
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<ul style="margin:0; padding:0; list-style: none; display: flex;">
Line 72: 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 79: 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)====
{{Fc|#d96dc9|magenta #d96dc9}}<br />
<div class=p-3 style="background: #fffefd">
{{Fc|#9978d8|purple #9978d8}}<br />
{| class="wikitable"
{{Fc|#5c8dd6|addition, enhancement, confirmation, blue #5c8dd6}}<br />
! Color
{{Fc|#3fa963|fix, functional, relevant, green #3fa963}}<br />
! Hex
{{Fc|#96a13f|chartreuse #96a13f}}<br />
! CSS Class Examples
{{Fc|#d0a91a|issue, unknown, yellow #d0a91a}}<br />
! Template:Fc Keywords
{{Fc|#c49584|instruction, ilheading<sup>1</sup>, salmon #c49584}}<br />
|-
{{Fc|#cc9042|change, modification, orange #cc9042}}<br />
| style="background: #fffefd; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta
{{Fc|#e6716a|removal, non-functional, irrelevant, warning, red #e6716a}}<br />
|-
{{Fc|#303030|important, highlight #303030 }}<br />
| style="background: #fffefd; color:#9978d8" | purple || #9978d8 || (m)purplebd || purple, dev
|-
| style="background: #fffefd; color:#5c8dd6" | blue || #5c8dd6 || (m)bluebd || blue, notice
|-
| style="background: #fffefd; color:#3fa963" | green || #3fa963 || (m)greenbd || green
|-
| style="background: #fffefd; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug
|-
| style="background: #fffefd; color:#d0a91a" | yellow || #d0a91a || (m)yellowbd || yellow, issue
|-
| style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction
|-
| style="background: #fffefd; color:#f08740" | orange || #f08740 || (m)orangebd || orange
|-
| style="background: #fffefd; color:#f76770" | red || #f76770 || (m)redbd || red, warning, warn
|-
| style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter
|-
| style="background: #fffefd; color:#888" | dimmer || #888 || dimx || dimmer, dim
|}
 
<div>
<div>
<ul style="margin:0; padding:0; list-style: none; display: flex;">
<ul style="margin:0; padding:0; list-style: none; display: flex;">
Line 112: 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 119: 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>

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

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

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

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


Retrieved from "https://stepmodifications.org/wiki/index.php?title=Project:Site_Color_Palette&oldid=187184"