Project:Site Color Palette: Difference between revisions

From Step Mods | Change The Game
mNo edit summary
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 (applies only to colors)


Invoke by using (for example):
Invoke by using (for example):
Line 14: Line 15:
! Color
! Color
! Hex
! Hex
! CSS Class
! CSS Class (text example)
! Template:Fc Keywords
! Template:Fc Keywords
|-
|-
| style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || magenttx || magenta
| style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m)magenttx || magenta
|-
|-
| style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || purpletx || purple, dev
| style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m)purpletx || purple, dev
|-
|-
| style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || bluetx || blue, anotice
| style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m)bluetx || blue, anotice
|-
|-
| style="background: #373f49; color:#4bb073" | green || #4bb073 || greentx || green
| style="background: #373f49; color:#4bb073" | green || #4bb073 || (m)greentx || green
|-
|-
| style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || chartrtx || chartr, bug
| style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m)chartrtx || chartr, bug
|-
|-
| style="background: #373f49; color:#e0b438" | yellow || #e0b438 || yellowtx || yellow, issue
| style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m)yellowtx || yellow, issue
|-
|-
| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || salmontx || salmon, instruction
| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmontx || salmon, instruction
|-
|-
| style="background: #373f49; color:#d89c4e" | orange || #d89c4e || orangetx || orange
| style="background: #373f49; color:#d89c4e" | orange || #d89c4e || (m)orangetx || orange
|-
|-
| style="background: #373f49; color:#ee7a72" | red || #ee7a72 || redtx || red, rwarning, warn
| style="background: #373f49; color:#ee7a72" | red || #ee7a72 || (m)redtx || red, rwarning, warn
|-
|-
| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter
| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter
Line 56: Line 57:
<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:#d89c4e50; 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:#ee7a7250; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
Line 75: Line 76:
! Color
! Color
! Hex
! Hex
! CSS Class
! CSS Class (text example)
! Template:Fc Keywords
! Template:Fc Keywords
|-
|-
| style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || magenttx || magenta
| style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m)magenttx || magenta
|-
|-
| style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || purpletx || purple, dev
| style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m)purpletx || purple, dev
|-
|-
| style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || bluetx || blue, notice
| style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m)bluetx || blue, notice
|-
|-
| style="background: #2a2a2f; color:#43a86b" | green || #43a86b || greentx || green
| style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m)greentx || green
|-
|-
| style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || chartrtx || chartr, bug
| style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m)chartrtx || chartr, bug
|-
|-
| style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || yellowtx || yellow, issue
| style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m)yellowtx || yellow, issue
|-
|-
| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || salmontx || salmon, instruction
| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmontx || salmon, instruction
|-
|-
| style="background: #2a2a2f; color:#d09446" | orange || #d09446 || orangetx || orange
| style="background: #2a2a2f; color:#d09446" | orange || #d09446 || (m)orangetx || orange
|-
|-
| style="background: #2a2a2f; color:#e6716a" | red || #e6716a || redtx || red, warning, warn
| style="background: #2a2a2f; color:#e6716a" | red || #e6716a || (m)redtx || red, warning, warn
|-
|-
| style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter
| style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter
Line 117: Line 118:
<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:#d0944650; 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:#e6716a50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
Line 136: Line 137:
! Color
! Color
! Hex
! Hex
! CSS Class
! CSS Class (text example)
! Template:Fc Keywords
! Template:Fc Keywords
|-
|-
Line 157: Line 158:
| style="background: #fffefd; color:#e6716a" | red || #e6716a || (m)redtx || red, warning, warn
| style="background: #fffefd; color:#e6716a" | red || #e6716a || (m)redtx || red, warning, warn
|-
|-
| style="background: #fffefd; color:#333" | highlight || #333 || (m)hltx || highlight, brighter
| style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter
|-
|-
| style="background: #fffefd; color:#888" | dimmer || #888 || (m)dimx || dimmer, dim
| style="background: #fffefd; color:#888" | dimmer || #888 || dimx || dimmer, dim
|}
|}


Line 178: Line 179:
<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:#cc904250; 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:#e6716a50; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li>
</ul>
</ul>
</div>
</div>
</div>
</div>

Revision as of 17:35, 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 (applies only to colors)

Invoke by using (for example): 

<span class="orangetx">Class for orange text</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


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