MediaWiki talk:Gadget-colorPalette.css: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
== Our current color palette == |
== Our current color palette == |
||
You can use any of these in your CSS styles by using the var() function. |
You can use any of these in your CSS styles by using the var() function. |
||
;For example |
;For example |
||
: color: var(--secondary-lightish) |
:: color: var(--secondary-lightish) |
||
: background-color: var(--primary |
:: background-color: var(--primary |
||
---- |
|||
<div class="color-wrapper"> |
<div class="color-wrapper"> |
||
<div class="color-row primary |
<div class="color-row primary"> |
||
<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 16: | ||
<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"> |
||
<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 27: | ||
<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"> |
||
<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 38: | ||
<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"> |
||
<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 49: | ||
<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"> |
||
<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 60: | ||
<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"> |
||
<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 98: | ||
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 16:04, 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
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
