Project:Site Color Palette: Difference between revisions
From Step Mods | Change The Game
m (→Dark) |
TechAngel85 (talk | contribs) mNo edit summary |
||
(45 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
[[Category:Reference]][[Category:Step Wiki Guides]] | {{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 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: | ||
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 | |||
** Does not apply to 'brighter'/'dimmer' | |||
** Does not apply to text colors | |||
{{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 (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> | |||
====Classic==== | ====Classic==== | ||
<div class=p-3 style="background: #373f49"> | <div class=p-3 style="background: #373f49"> | ||
{| class="wikitable" | {| class="wikitable" | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class Examples | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| | | style="background: #373f49; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta | ||
|- | |- | ||
| | | style="background: #373f49; color:#aa88e8" | purple || #aa88e8 || (m)purplebd || purple, dev | ||
|- | |- | ||
| | | style="background: #373f49; color:#64a5e3" | blue || #64a5e3 || (m)bluebd || blue, anotice | ||
|- | |- | ||
| | | style="background: #373f49; color:#4bb073" | green || #4bb073 || (m)greenbd || green | ||
|- | |- | ||
| | | style="background: #373f49; color:#9ead48" | chartreuse || #9ead48 || (m)chartrbd || chartr, bug | ||
|- | |- | ||
| | | style="background: #373f49; color:#e0b438" | yellow || #e0b438 || (m)yellowbd || yellow, issue | ||
|- | |- | ||
| | | style="background: #373f49; color:#daaa99" | salmon || #daaa99 || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| | | style="background: #373f49; color:#f09047" | orange || #f09047 || (m)orangebd || orange | ||
|- | |- | ||
| | | style="background: #373f49; color:#ff7077" | red || #ff7077 || (m)redbd || red, rwarning, warn | ||
|- | |- | ||
| | | style="background: #373f49; color:#ddd" | highlight || #ddd || hltx || highlight, brighter | ||
|- | |- | ||
| | | style="background: #373f49; color:#888" | dim || #888 || dimtx || dimmer, dim | ||
|} | |} | ||
Line 49: | Line 54: | ||
<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:# | <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> | ||
</div> | </div> | ||
Line 56: | Line 61: | ||
<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:#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 | <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> | ||
</div> | </div> | ||
Line 75: | Line 80: | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class Examples | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| style="background: #2a2a2f" | | style="background: #2a2a2f; color:#ce56bf" | magenta || #ce56bf || (m)magentbd || magenta | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#a07fdf" | purple || #a07fdf || (m)purplebd || purple, dev | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#5c8dd7" | blue || #5c8dd7 || (m)bluebd || blue, notice | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#43a86b" | green || #43a86b || (m)greenbd || green | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#d6b026" | yellow || #d6b026 || (m)yellowbd || yellow, issue | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#d0a08f" | salmon || #d0a08f || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| | | style="background: #2a2a2f; color:#f08740" | orange || #f08740 || (m)orangebd || orange | ||
|- | |- | ||
| | | 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:#888" | dim || #888 || dimx || dimmer, dim | ||
|} | |} | ||
Line 110: | Line 115: | ||
<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 117: | Line 122: | ||
<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:#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 | <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 131: | Line 136: | ||
<br /> | <br /> | ||
====Light==== | ====Light (theme retired)==== | ||
<div class=p-3 style="background: #fffefd"> | <div class=p-3 style="background: #fffefd"> | ||
{| class="wikitable" | {| class="wikitable" | ||
! Color | ! Color | ||
! Hex | ! Hex | ||
! CSS Class | ! CSS Class Examples | ||
! Template:Fc Keywords | ! Template:Fc Keywords | ||
|- | |- | ||
| | | style="background: #fffefd; color:#d96dc9" | magenta || #d96dc9 || (m)magentbd || magenta | ||
|- | |- | ||
| | | style="background: #fffefd; color:#9978d8" | purple || #9978d8 || (m)purplebd || purple, dev | ||
|- | |- | ||
| | | style="background: #fffefd; color:#5c8dd6" | blue || #5c8dd6 || (m)bluebd || blue, notice | ||
|- | |- | ||
| | | style="background: #fffefd; color:#3fa963" | green || #3fa963 || (m)greenbd || green | ||
|- | |- | ||
| | | style="background: #fffefd; color:#96a13f" | chartreuse || #96a13f || (m)chartrbd || chartr, bug | ||
|- | |- | ||
| | | style="background: #fffefd; color:#d0a91a" | yellow || #d0a91a || (m)yellowbd || yellow, issue | ||
|- | |- | ||
| | | style="background: #fffefd; color:#c49584" | salmon || #c49584 || (m)salmonbd || salmon, instruction | ||
|- | |- | ||
| | | style="background: #fffefd; color:#f08740" | orange || #f08740 || (m)orangebd || orange | ||
|- | |- | ||
| | | 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:#888" | dimmer || #888 || dimx || dimmer, dim | ||
|} | |} | ||
Line 171: | Line 176: | ||
<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 178: | Line 183: | ||
<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:#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 | <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 15:33, September 29, 2023
Site Color Palette
Colors and classes by theme for use on the Step platform
by: Step Modifications | Forum Topic
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
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):
<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 | #f09047 | (m)orangebd | orange |
red | #ff7077 | (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 | #f08740 | (m)orangebd | orange |
red | #f76770 | (m)redbd | red, warning, warn |
highlight | #d8d8d8 | hltx | highlight, brighter |
dim | #888 | dimx | dimmer, dim |
Light (theme retired)[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 | #f08740 | (m)orangebd | orange |
red | #f76770 | (m)redbd | red, warning, warn |
highlight | #333 | hltx | highlight, brighter |
dimmer | #888 | dimx | dimmer, dim |