Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
m (→CSS Classes) |
mNo edit summary |
||
Line 18: | Line 18: | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class Examples | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m) | | style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta | ||
|- | |- | ||
| style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m) | | style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m)purplebd || purple, dev | ||
|- | |- | ||
| style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m) | | style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m)bluebd || blue, anotice | ||
|- | |- | ||
| style="background: #373f49; color:#4bb073" | green || #4bb073 || (m) | | style="background: #373f49; color:#4bb073" | green || #4bb073 || (m)greenbd || green | ||
|- | |- | ||
| style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m) | | style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m)chartrbd || chartr, bug | ||
|- | |- | ||
| style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m) | | style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m)yellowbd || yellow, issue | ||
|- | |- | ||
| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m) | | style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| style="background: #373f49; color:#d89c4e" | orange || #d89c4e || (m) | | style="background: #373f49; color:#d89c4e" | orange || #d89c4e || (m)orangebd || orange | ||
|- | |- | ||
| style="background: #373f49; color:#ee7a72" | red || #ee7a72 || (m) | | style="background: #373f49; color:#ee7a72" | red || #ee7a72 || (m)redbd || red, rwarning, warn | ||
|- | |- | ||
| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter | | style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter | ||
|- | |- | ||
| style="background: #373f49; color:#888" | dim || #888 || | | style="background: #373f49; color:#888" | dim || #888 || dimtx || dimmer, dim | ||
|} | |} | ||
Line 79: | Line 79: | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class Examples | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m) | | style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m)magentbd || magenta | ||
|- | |- | ||
| style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m) | | style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m)purplebd || purple, dev | ||
|- | |- | ||
| style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m) | | style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m)bluebd || blue, notice | ||
|- | |- | ||
| style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m) | | style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m)greenbd || green | ||
|- | |- | ||
| style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m) | | style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug | ||
|- | |- | ||
| style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m) | | style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m)yellowbd || yellow, issue | ||
|- | |- | ||
| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m) | | style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| style="background: #2a2a2f; color:#d09446" | orange || #d09446 || (m) | | style="background: #2a2a2f; color:#d09446" | orange || #d09446 || (m)orangebd || orange | ||
|- | |- | ||
| style="background: #2a2a2f; color:#e6716a" | red || #e6716a || (m) | | style="background: #2a2a2f; color:#e6716a" | red || #e6716a || (m)redbd || red, warning, warn | ||
|- | |- | ||
| style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter | | style="background: #2a2a2f; color:#d8d8d8" | highlight || #d8d8d8 || hltx || highlight, brighter | ||
Line 140: | Line 140: | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class Examples | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| style="background: #fffefd; color:#d96dc9" | magenta || #d96dc9 || (m) | | style="background: #fffefd; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta | ||
|- | |- | ||
| style="background: #fffefd; color:#9978d8" | purple || #9978d8 || (m) | | style="background: #fffefd; color:#9978d8" | purple || #9978d8 || (m)purplebd || purple, dev | ||
|- | |- | ||
| style="background: #fffefd; color:#5c8dd6" | blue || #5c8dd6 || (m) | | style="background: #fffefd; color:#5c8dd6" | blue || #5c8dd6 || (m)bluebd || blue, notice | ||
|- | |- | ||
| style="background: #fffefd; color:#3fa963" | green || #3fa963 || (m) | | style="background: #fffefd; color:#3fa963" | green || #3fa963 || (m)greenbd || green | ||
|- | |- | ||
| style="background: #fffefd; color:#96a13f" | chartreuse || #96a13f || (m) | | style="background: #fffefd; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug | ||
|- | |- | ||
| style="background: #fffefd; color:#d0a91a" | yellow || #d0a91a || (m) | | style="background: #fffefd; color:#d0a91a" | yellow || #d0a91a || (m)yellowbd || yellow, issue | ||
|- | |- | ||
| style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m) | | style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| style="background: #fffefd; color:#cc9042" | orange || #cc9042 || (m) | | style="background: #fffefd; color:#cc9042" | orange || #cc9042 || (m)orangebd || orange | ||
|- | |- | ||
| style="background: #fffefd; color:#e6716a" | red || #e6716a || (m) | | style="background: #fffefd; color:#e6716a" | red || #e6716a || (m)redbd || red, warning, warn | ||
|- | |- | ||
| style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter | | style="background: #fffefd; color:#333" | highlight || #333 || hltx || highlight, brighter |
Revision as of 17:46, 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
- Does not apply to 'brighter'/'dimmer'
- Does not apply to text colors
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 | #d89c4e | (m)orangebd | orange |
red | #ee7a72 | (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 | #d09446 | (m)orangebd | orange |
red | #e6716a | (m)redbd | red, warning, warn |
highlight | #d8d8d8 | hltx | highlight, brighter |
dim | #888 | dimx | dimmer, dim |
Light[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 | #cc9042 | (m)orangebd | orange |
red | #e6716a | (m)redbd | red, warning, warn |
highlight | #333 | hltx | highlight, brighter |
dimmer | #888 | dimx | dimmer, dim |