Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
mNo edit summary |
mNo edit summary |
||
Line 69: | Line 69: | ||
====Dark==== | ====Dark==== | ||
{{Fc|#ce56bf|magenta | {| class="wikitable" | ||
{{Fc| | ! Color | ||
{{Fc|#5c8dd7|addition, enhancement, confirmation | ! Hex | ||
{{Fc|#43a86b|fix, functional, relevant | ! CSS Class | ||
{{Fc| | ! Template:Fc Keywords | ||
{{Fc|#d6b026|issue, unknown | |- | ||
{{Fc|#d0a08f|instruction | | {{Fc|magenta|magenta}} || #ce56bf || magenttx || magenta | ||
{{Fc|#d09446|change, modification | |- | ||
{{Fc|#e6716a|removal, non-functional, irrelevant, warning | | {{Fc|purple|purple}} || #a07fdf || purpletx || vpurple | ||
{{Fc|#d8d8d8|important | |- | ||
| {{Fc|blue|blue}} || #5c8dd7 || bluetx || blue, addition, enhancement, confirmation | |||
|- | |||
| {{Fc|green|green}} || #43a86b || greentx || green, fix, functional, relevant | |||
|- | |||
| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr | |||
|- | |||
| {{Fc|yellow|yellow}} || #d6b026 || yellowtx || yellow, issue, unknown | |||
|- | |||
| {{Fc|salmon|salmon}} || #d0a08f || salmontx || salmon, instruction | |||
|- | |||
| {{Fc|orange|orange}} || #d09446 || orangetx || orange, change, modification | |||
|- | |||
| {{Fc|red|red}} || #e6716a || redtx || red, removal, non-functional, irrelevant, warning | |||
|- | |||
| {{Fc|highlight|highlight}} || #d8d8d8 || hltx || highlight, important | |||
|- | |||
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer | |||
|} | |||
<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 109: | Line 128: | ||
====Light==== | ====Light==== | ||
{{Fc|#d96dc9|magenta | {| class="wikitable" | ||
{{Fc| | ! Color | ||
{{Fc|#5c8dd6|addition, enhancement, confirmation | ! Hex | ||
{{Fc|#3fa963|fix, functional, relevant | ! CSS Class | ||
{{Fc| | ! Template:Fc Keywords | ||
{{Fc|#d0a91a|issue, unknown | |- | ||
{{Fc|#c49584|instruction | | {{Fc|magenta|magenta}} || #d96dc9 || magenttx || magenta | ||
{{Fc|#cc9042|change, modification | |- | ||
{{Fc|#e6716a|removal, non-functional, irrelevant, warning | | {{Fc|purple|purple}} || #9978d8 || purpletx || vpurple | ||
{{Fc|#303030|important | |- | ||
| {{Fc|blue|blue}} || #5c8dd6 || bluetx || blue, addition, enhancement, confirmation | |||
|- | |||
| {{Fc|green|green}} || #3fa963 || greentx || green, fix, functional, relevant | |||
|- | |||
| {{Fc|chartr|chartreuse}} || #96a13f || chartrtx || chartr | |||
|- | |||
| {{Fc|yellow|yellow}} || #d0a91a || yellowtx || yellow, issue, unknown | |||
|- | |||
| {{Fc|salmon|salmon}} || #c49584 || salmontx || salmon, instruction | |||
|- | |||
| {{Fc|orange|orange}} || #cc9042 || orangetx || orange, change, modification | |||
|- | |||
| {{Fc|red|red}} || #e6716a || redtx || red, removal, non-functional, irrelevant, warning | |||
|- | |||
| {{Fc|highlight|highlight}} || #303030 || hltx || highlight, important | |||
|- | |||
| {{Fc|dimmer|dimmer}} || #888 || dimx || dimmer | |||
|} | |||
<div> | <div> | ||
<ul style="margin:0; padding:0; list-style: none; display: flex;"> | <ul style="margin:0; padding:0; list-style: none; display: flex;"> |
Revision as of 19:41, June 30, 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
Invoke by using (for example):
<span class="orangetx">Class for orange text</span>
Classic
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #d96dc9 | magenttx | magenta |
purple | #aa88e8 | purpletx | vpurple |
blue | #64a5e3 | bluetx | blue, addition, enhancement, confirmation |
green | #4bb073 | greentx | green, fix, functional, relevant |
chartreuse | #9ead48 | chartrtx | chartr |
yellow | #e0b438 | yellowtx | yellow, issue, unknown |
salmon | #daaa99 | salmontx | salmon, instruction |
orange | #d89c4e | orangetx | orange, change, modification |
red | #ee7a72 | redtx | red, removal, non-functional, irrelevant, warning |
highlight | #dddddd | hltx | highlight, important |
dimmer | #888 | dimx | dimmer |
Dark
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #ce56bf | magenttx | magenta |
purple | #a07fdf | purpletx | vpurple |
blue | #5c8dd7 | bluetx | blue, addition, enhancement, confirmation |
green | #43a86b | greentx | green, fix, functional, relevant |
chartreuse | #96a13f | chartrtx | chartr |
yellow | #d6b026 | yellowtx | yellow, issue, unknown |
salmon | #d0a08f | salmontx | salmon, instruction |
orange | #d09446 | orangetx | orange, change, modification |
red | #e6716a | redtx | red, removal, non-functional, irrelevant, warning |
highlight | #d8d8d8 | hltx | highlight, important |
dimmer | #888 | dimx | dimmer |
Light
Color | Hex | CSS Class | Template:Fc Keywords |
---|---|---|---|
magenta | #d96dc9 | magenttx | magenta |
purple | #9978d8 | purpletx | vpurple |
blue | #5c8dd6 | bluetx | blue, addition, enhancement, confirmation |
green | #3fa963 | greentx | green, fix, functional, relevant |
chartreuse | #96a13f | chartrtx | chartr |
yellow | #d0a91a | yellowtx | yellow, issue, unknown |
salmon | #c49584 | salmontx | salmon, instruction |
orange | #cc9042 | orangetx | orange, change, modification |
red | #e6716a | redtx | red, removal, non-functional, irrelevant, warning |
highlight | #303030 | hltx | highlight, important |
dimmer | #888 | dimx | dimmer |