MediaWiki talk:Gadget-colorPalette.css: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
No edit summary |
No edit summary |
||
| Line 6: | Line 6: | ||
---- |
---- |
||
<div class="color-wrapper"> |
<div class="color-wrapper"> |
||
<div class="color-row primary"> |
<div class="color-row primary lightness"> |
||
<div style="background-color: var(--primary-lightest)"><br>lightest</div> |
<div style="background-color: var(--primary-lightest)"><br>lightest</div> |
||
<div style="background-color: var(--primary-lighter)"><br>light</div> |
<div style="background-color: var(--primary-lighter)"><br>light</div> |
||
| Line 17: | Line 17: | ||
<div style="background-color: var(--primary-darkest)"><br>darkest</div> |
<div style="background-color: var(--primary-darkest)"><br>darkest</div> |
||
</div> |
</div> |
||
<div class="color-row primary"> |
<div class="color-row primary saturation"> |
||
<div style="background-color: var(--primary-desaturatedest)"><br>desaturatedest</div> |
<div style="background-color: var(--primary-desaturatedest)"><br>desaturatedest</div> |
||
<div style="background-color: var(--primary-desaturateder)"><br>desaturated</div> |
<div style="background-color: var(--primary-desaturateder)"><br>desaturated</div> |
||
| Line 28: | Line 28: | ||
<div style="background-color: var(--primary-saturatedest)"><br>saturatedest</div> |
<div style="background-color: var(--primary-saturatedest)"><br>saturatedest</div> |
||
</div> |
</div> |
||
<div class="color-row secondary"> |
<div class="color-row secondary lightness"> |
||
<div style="background-color: var(--secondary-lightest)"><br>lightest</div> |
<div style="background-color: var(--secondary-lightest)"><br>lightest</div> |
||
<div style="background-color: var(--secondary-lighter)"><br>light</div> |
<div style="background-color: var(--secondary-lighter)"><br>light</div> |
||
| Line 39: | Line 39: | ||
<div style="background-color: var(--secondary-darkest)"><br>darkest</div> |
<div style="background-color: var(--secondary-darkest)"><br>darkest</div> |
||
</div> |
</div> |
||
<div class="color-row secondary"> |
<div class="color-row secondary saturation"> |
||
<div style="background-color: var(--secondary-desaturatedest)"><br>desaturatedest</div> |
<div style="background-color: var(--secondary-desaturatedest)"><br>desaturatedest</div> |
||
<div style="background-color: var(--secondary-desaturateder)"><br>desaturated</div> |
<div style="background-color: var(--secondary-desaturateder)"><br>desaturated</div> |
||
| Line 50: | Line 50: | ||
<div style="background-color: var(--secondary-saturatedest)"><br>saturatedest</div> |
<div style="background-color: var(--secondary-saturatedest)"><br>saturatedest</div> |
||
</div> |
</div> |
||
<div class="color-row accent"> |
<div class="color-row accent lightness"> |
||
<div style="background-color: var(--accent-lightest)"><br>lightest</div> |
<div style="background-color: var(--accent-lightest)"><br>lightest</div> |
||
<div style="background-color: var(--accent-lighter)"><br>light</div> |
<div style="background-color: var(--accent-lighter)"><br>light</div> |
||
| Line 61: | Line 61: | ||
<div style="background-color: var(--accent-darkest)"><br>darkest</div> |
<div style="background-color: var(--accent-darkest)"><br>darkest</div> |
||
</div> |
</div> |
||
<div class="color-row accent"> |
<div class="color-row accent saturation"> |
||
<div style="background-color: var(--accent-desaturatedest)"><br>desaturatedest</div> |
<div style="background-color: var(--accent-desaturatedest)"><br>desaturatedest</div> |
||
<div style="background-color: var(--accent-desaturateder)"><br>desaturated</div> |
<div style="background-color: var(--accent-desaturateder)"><br>desaturated</div> |
||
| Line 99: | Line 99: | ||
content: "Accent"; |
content: "Accent"; |
||
} |
} |
||
.accent.saturation::nth-child(1) {background-color: var(--accent-desaturatedest;} |
|||
.accent.saturation::nth-child(2) {background-color: var(--accent-desaturateder;} |
|||
.accent.saturation::nth-child(3) {background-color: var(--accent-desaturated;} |
|||
.accent.saturation::nth-child(4) {background-color: var(--accent-desaturatedish;} |
|||
.accent.saturation::nth-child(5) {background-color: var(--accent;} |
|||
.accent.saturation::nth-child(6) {background-color: var(--accent-saturatedish;} |
|||
.accent.saturation::nth-child(7) {background-color: var(--accent-saturated;} |
|||
.accent.saturation::nth-child(8) {background-color: var(--accent-saturateder;} |
|||
.accent.saturation::nth-child(9) {background-color: var(--accent-saturatedest;} |
|||
}} |
}} |
||
Revision as of 15:36, 22 December 2019
Our current color palette
You can use any of these in your CSS styles by using the var() function.
- For example
- color: var(--secondary-lightish)
- background-color: var(--primary-desaturateder)
lightest
light
light
lightish
base
darkish
dark
darker
darkest
desaturatedest
desaturated
desaturated
desaturatedish
base
saturatedish
saturated
saturateder
saturatedest
lightest
light
light
lightish
base
darkish
dark
darker
darkest
desaturatedest
desaturated
desaturated
desaturatedish
base
saturatedish
saturated
saturateder
saturatedest
lightest
light
light
lightish
base
darkish
dark
darker
darkest
desaturatedest
desaturated
desaturated
desaturatedish
base
saturatedish
saturated
saturateder
saturatedest
