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 == |
|||
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 |
|||
<div class="color-wrapper"> |
<div class="color-wrapper"> |
||
<div class="color-row"> |
<div class="color-row primary"> |
||
<div |
<div style="background-color: var(--primary-lightest)"><br>lightest</div> |
||
<div |
<div style="background-color: var(--primary-lighter)"><br>light</div> |
||
<div |
<div style="background-color: var(--primary-light)"><br>light</div> |
||
<div |
<div style="background-color: var(--primary-lightish)"><br>lightish</div> |
||
<div |
<div style="background-color: var(--primary)"><br>base</div> |
||
<div |
<div style="background-color: var(--primary-darkish)"><br>darkish</div> |
||
<div |
<div style="background-color: var(--primary-dark)"><br>dark</div> |
||
<div |
<div style="background-color: var(--primary-darker)"><br>darker</div> |
||
<div |
<div style="background-color: var(--primary-darkest)"><br>darkest</div> |
||
</div> |
</div> |
||
<div class="color-row"> |
<div class="color-row primary"> |
||
<div |
<div style="background-color: var(--primary-desaturatedest)"><br>desaturatedest</div> |
||
<div |
<div style="background-color: var(--primary-desaturateder)"><br>desaturated</div> |
||
<div |
<div style="background-color: var(--primary-desaturated)"><br>desaturated</div> |
||
<div |
<div style="background-color: var(--primary-desaturatedish)"><br>desaturatedish</div> |
||
<div |
<div style="background-color: var(--primary)"><br>base</div> |
||
<div |
<div style="background-color: var(--primary-saturatedish)"><br>saturatedish</div> |
||
<div |
<div style="background-color: var(--primary-saturated)"><br>saturated</div> |
||
<div |
<div style="background-color: var(--primary-saturateder)"><br>saturateder</div> |
||
<div |
<div style="background-color: var(--primary-saturatedest)"><br>saturatedest</div> |
||
</div> |
</div> |
||
<div class="color-row"> |
<div class="color-row secondary"> |
||
<div |
<div style="background-color: var(--secondary-lightest)"><br>lightest</div> |
||
<div |
<div style="background-color: var(--secondary-lighter)"><br>light</div> |
||
<div |
<div style="background-color: var(--secondary-light)"><br>light</div> |
||
<div |
<div style="background-color: var(--secondary-lightish)"><br>lightish</div> |
||
<div |
<div style="background-color: var(--secondary)"><br>base</div> |
||
<div |
<div style="background-color: var(--secondary-darkish)"><br>darkish</div> |
||
<div |
<div style="background-color: var(--secondary-dark)"><br>dark</div> |
||
<div |
<div style="background-color: var(--secondary-darker)"><br>darker</div> |
||
<div |
<div style="background-color: var(--secondary-darkest)"><br>darkest</div> |
||
</div> |
</div> |
||
<div class="color-row"> |
<div class="color-row secondary"> |
||
<div |
<div style="background-color: var(--secondary-desaturatedest)"><br>desaturatedest</div> |
||
<div |
<div style="background-color: var(--secondary-desaturateder)"><br>desaturated</div> |
||
<div |
<div style="background-color: var(--secondary-desaturated)"><br>desaturated</div> |
||
<div |
<div style="background-color: var(--secondary-desaturatedish)"><br>desaturatedish</div> |
||
<div |
<div style="background-color: var(--secondary)"><br>base</div> |
||
<div |
<div style="background-color: var(--secondary-saturatedish)"><br>saturatedish</div> |
||
<div |
<div style="background-color: var(--secondary-saturated)"><br>saturated</div> |
||
<div |
<div style="background-color: var(--secondary-saturateder)"><br>saturateder</div> |
||
<div |
<div style="background-color: var(--secondary-saturatedest)"><br>saturatedest</div> |
||
</div> |
</div> |
||
<div class="color-row"> |
<div class="color-row accent"> |
||
<div |
<div style="background-color: var(--accent-lightest)"><br>lightest</div> |
||
<div |
<div style="background-color: var(--accent-lighter)"><br>light</div> |
||
<div |
<div style="background-color: var(--accent-light)"><br>light</div> |
||
<div |
<div style="background-color: var(--accent-lightish)"><br>lightish</div> |
||
<div |
<div style="background-color: var(--accent)"><br>base</div> |
||
<div |
<div style="background-color: var(--accent-darkish)"><br>darkish</div> |
||
<div |
<div style="background-color: var(--accent-dark)"><br>dark</div> |
||
<div |
<div style="background-color: var(--accent-darker)"><br>darker</div> |
||
<div |
<div style="background-color: var(--accent-darkest)"><br>darkest</div> |
||
</div> |
</div> |
||
<div class="color-row"> |
<div class="color-row accent"> |
||
<div |
<div style="background-color: var(--accent-desaturatedest)"><br>desaturatedest</div> |
||
<div |
<div style="background-color: var(--accent-desaturateder)"><br>desaturated</div> |
||
<div |
<div style="background-color: var(--accent-desaturated)"><br>desaturated</div> |
||
<div |
<div style="background-color: var(--accent-desaturatedish)"><br>desaturatedish</div> |
||
<div |
<div style="background-color: var(--accent)"><br>base</div> |
||
<div |
<div style="background-color: var(--accent-saturatedish)"><br>saturatedish</div> |
||
<div |
<div style="background-color: var(--accent-saturated)"><br>saturated</div> |
||
<div |
<div style="background-color: var(--accent-saturateder)"><br>saturateder</div> |
||
<div |
<div style="background-color: var(--accent-saturatedest)"><br>saturatedest</div> |
||
</div> |
</div> |
||
</div> |
</div> |
||
Line 84: | Line 89: | ||
} |
} |
||
.color-row.primary > div::before { |
|||
content: "Primary"; |
content: "Primary"; |
||
} |
} |
||
.color-row.secondary > div::before { |
|||
content: "Secondary"; |
content: "Secondary"; |
||
} |
} |
||
.color-row.Accent > div::before { |
|||
content: "Accent"; |
content: "Accent"; |
||
} |
} |
Revision as of 15:18, 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