Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
mNo edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
{{PageTitle|title=Site Color pallet|subtitle=Colors and classes by theme for use on this wiki|author=Step Modifications| | {{PageTitle|title=Site Color pallet|subtitle=Colors and classes by theme for use on this wiki|author=Step Modifications|forum=15793}}[[Category:Reference]][[Category:Step Wiki Guides]] | ||
===CSS Classes=== | ===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: | 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: | ||
Revision as of 17:51, September 20, 2021
Site Color pallet
Colors and classes by theme for use on this wiki
by: Step Modifications
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 |
