Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
m (→Light) |
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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 || | | style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter | ||
|- | |- | ||
| style="background: #fffefd; color:#888" | dimmer || #888 || | | 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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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 | <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
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
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
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
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 |