Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
m (→Light) |
m (→CSS Classes) |
||
| (28 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{PageTitle|title=Site Color | {{PageTitle|title=Site Color Palette|subtitle=Colors and classes by theme for use on the Step platform|author=Step Modifications|forumtid=15793}}[[Category:Administration]][[Category:Reference]][[Category:Step Wiki Guides]]{{TOC}} | ||
===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 | Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes are used as indicated below. Each uses the color name (or shortened name) with 'type' suffix: | ||
* Text - tx - example: orangetx | * Text - tx - example: orangetx | ||
* Background - bg example: orangebg | * Background - bg example: orangebg | ||
| Line 10: | Line 10: | ||
{{Fc|salmon|''NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.''}} | {{Fc|salmon|''NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.''}} | ||
Invoke by using (for example): | Invoke by using HTML (for example): | ||
: <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight> | : <syntaxhighlight lang="HTML"><span class="orangetx">Class for orange text</span></syntaxhighlight> | ||
: <syntaxhighlight lang="HTML"><span class="morangebg">Class for orange 'muted' background</span></syntaxhighlight> | : <syntaxhighlight lang="HTML"><span class="morangebg">Class for orange 'muted' background</span></syntaxhighlight> | ||
{{Fc|salmon|'''Text Colors'''}}<br> | |||
On pages where guide template-call thresholds are limiting (Mod and Guide pages), it's important to use the HTML methods mentioned previously for coloring text. Everywhere else, it's more convenient to invoke [[:Template:Fc]] to color text. | |||
: <syntaxhighlight lang="wiki">{{Fc|orange|Use the Fc template to make orange text}}</syntaxhighlight> | |||
====Classic==== | ====Classic==== | ||
| Line 36: | Line 40: | ||
| style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction | | style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| style="background: #373f49; color:# | | style="background: #373f49; color:#f09047" | orange || #f09047 || (m)orangebd || orange | ||
|- | |- | ||
| style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, | | style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, warning, warn | ||
|- | |- | ||
| style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter | | style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter | ||
| Line 54: | Line 58: | ||
<li><span style="display:inline-block; vertical-align:middle; background:#e0b438; 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:#e0b438; 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:#daaa99; 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:#daaa99; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f09047; 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:#ff7077; 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:#ff7077; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
| Line 68: | Line 72: | ||
<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; 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; 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; 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; background:# | <li><span style="display:inline-block; vertical-align:middle; background:#f0904750; 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:#ff707750; 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:#ff707750; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
| Line 97: | Line 101: | ||
| style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction | | style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| style="background: #2a2a2f; color:# | | style="background: #2a2a2f; color:#f08740" | orange || #f08740 || (m)orangebd || orange | ||
|- | |- | ||
| style="background: #2a2a2f; color:# | | style="background: #2a2a2f; color:#f76770" | red || #f76770 || (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 115: | Line 119: | ||
<li><span style="display:inline-block; vertical-align:middle; background:#d6b026; 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:#d6b026; 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:#d0a08f; 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:#d0a08f; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f08740; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f76770; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 129: | Line 133: | ||
<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; 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; 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; 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; background:# | <li><span style="display:inline-block; vertical-align:middle; background:#f0874050; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f7677050; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 136: | Line 140: | ||
<br /> | <br /> | ||
====Light==== | ====Light (theme retired)==== | ||
<div class=p-3 style="background: #fffefd"> | <div class=p-3 style="background: #fffefd"> | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 158: | Line 162: | ||
| style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction | | style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| style="background: #fffefd; color:# | | style="background: #fffefd; color:#f08740" | orange || #f08740 || (m)orangebd || orange | ||
|- | |- | ||
| style="background: #fffefd; color:# | | style="background: #fffefd; color:#f76770" | red || #f76770 || (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 | ||
| Line 176: | Line 180: | ||
<li><span style="display:inline-block; vertical-align:middle; background:#d0a91a; 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:#d0a91a; 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:#c49584; 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:#c49584; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f08740; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f76770; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 190: | Line 194: | ||
<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; 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; 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; 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; background:# | <li><span style="display:inline-block; vertical-align:middle; background:#f0874050; 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:# | <li><span style="display:inline-block; vertical-align:middle; background:#f7677050; margin:0 1em; position:relative; width:60px; height:100px; padding:0; display:block; position:relative;"></span></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
Latest revision as of 03:06, September 6, 2024
Site Color Palette
Colors and classes by theme for use on the Step platform
by: Step Modifications | Forum Topic
CSS Classes
Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes are 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
NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.
Invoke by using HTML (for example):
<span class="orangetx">Class for orange text</span>
<span class="morangebg">Class for orange 'muted' background</span>
Text Colors
On pages where guide template-call thresholds are limiting (Mod and Guide pages), it's important to use the HTML methods mentioned previously for coloring text. Everywhere else, it's more convenient to invoke Template:Fc to color text.
{{Fc|orange|Use the Fc template to make orange text}}
Classic
| 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 | #f09047 | (m)orangebd | orange |
| red | #ff7077 | (m)redbd | red, warning, warn |
| highlight | #ddd | hltx | highlight, brighter |
| dim | #888 | dimtx | dimmer, dim |
Dark
| 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 | #f08740 | (m)orangebd | orange |
| red | #f76770 | (m)redbd | red, warning, warn |
| highlight | #d8d8d8 | hltx | highlight, brighter |
| dim | #888 | dimx | dimmer, dim |
Light (theme retired)
| 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 | #f08740 | (m)orangebd | orange |
| red | #f76770 | (m)redbd | red, warning, warn |
| highlight | #333 | hltx | highlight, brighter |
| dimmer | #888 | dimx | dimmer, dim |
