MediaWiki talk:Gadget-colorPalette.css: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
No edit summary |
m (add more colors) |
||
| (6 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
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) |
||
: |
:background-color: var(--primary-desaturateder) |
||
---- |
---- |
||
{{#css: |
|||
{{#widget:Color palette}} |
|||
.color-wrapper { |
|||
overflow: auto; |
|||
color: white; |
|||
} |
|||
.color-row span:nth-child(odd), .color-row span:nth-child(odd)::before { |
|||
color: black; |
|||
} |
|||
.color-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
.color-row > div { |
|||
text-align: center; |
|||
height: 150px; |
|||
flex: 1 0 100px; |
|||
} |
|||
.color-row.grayscale > div { |
|||
flex: 1 0 0px; |
|||
} |
|||
.color-row.primary span:nth-child(1)::before, .color-row.primary span:nth-child(2)::before { |
|||
content: "Primary"; |
|||
} |
|||
.color-row.secondary span:nth-child(1)::before, .color-row.secondary span:nth-child(2)::before { |
|||
content: "Secondary"; |
|||
} |
|||
.color-row.tertiary span:nth-child(1)::before, .color-row.tertiary span:nth-child(2)::before { |
|||
content: "Tertiary"; |
|||
} |
|||
.color-row.accent span:nth-child(1)::before, .color-row.accent span:nth-child(2)::before { |
|||
content: "Accent"; |
|||
} |
|||
}} |
|||
<div class="color-wrapper"> |
|||
<div class="color-row primary"> |
|||
<div class="color-col" data-color="var(--primary-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div> |
|||
<div class="color-col" data-color="var(--primary-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div> |
|||
<div class="color-col" data-color="var(--primary-lighter-1)"><span><br>lighter-1<br></span><span><br>lighter-1</span></div> |
|||
<div class="color-col" data-color="var(--primary-lighter-2)"><span><br>lighter-2<br></span><span><br>lighter-2</span></div> |
|||
<div class="color-col" data-color="var(--primary-lighter-3)"><span><br>lighter-3<br></span><span><br>lighter-3</span></div> |
|||
<div class="color-col" data-color="var(--primary-light)"><span><br>light<br></span><span><br>light</span></div> |
|||
<div class="color-col" data-color="var(--primary-light-1)"><span><br>light-1<br></span><span><br>light-1</span></div> |
|||
<div class="color-col" data-color="var(--primary-light-2)"><span><br>light-2<br></span><span><br>light-2</span></div> |
|||
<div class="color-col" data-color="var(--primary-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div> |
|||
<div class="color-col" data-color="var(--primary-lightish-1)"><span><br>lightish-1<br></span><span><br>lightish-1</span></div> |
|||
<div class="color-col" data-color="var(--primary-lightish-2)"><span><br>lightish-2<br></span><span><br>lightish-2</span></div> |
|||
<div class="color-col" data-color="var(--primary)"><span><br>base<br></span><span><br>base</span></div> |
|||
</div> |
|||
<div class="color-row primary"> |
|||
<div class="color-col" data-color="var(--primary-darkish-2)"><span><br>darkish-2<br></span><span><br>darkish-2</span></div> |
|||
<div class="color-col" data-color="var(--primary-darkish-1)"><span><br>darkish-1<br></span><span><br>darkish-1</span></div> |
|||
<div class="color-col" data-color="var(--primary-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div> |
|||
<div class="color-col" data-color="var(--primary-dark-1)"><span><br>dark-1<br></span><span><br>dark-1</span></div> |
|||
<div class="color-col" data-color="var(--primary-dark-2)"><span><br>dark-2<br></span><span><br>dark-2</span></div> |
|||
<div class="color-col" data-color="var(--primary-dark)"><span><br>dark<br></span><span><br>dark</span></div> |
|||
<div class="color-col" data-color="var(--primary-darker-3)"><span><br>darker-3<br></span><span><br>darker-3</span></div> |
|||
<div class="color-col" data-color="var(--primary-darker-2)"><span><br>darker-2<br></span><span><br>darker-2</span></div> |
|||
<div class="color-col" data-color="var(--primary-darker-1)"><span><br>darker-1<br></span><span><br>darker-1</span></div> |
|||
<div class="color-col" data-color="var(--primary-darker)"><span><br>darker<br></span><span><br>darker</span></div> |
|||
<div class="color-col" data-color="var(--primary-darkest-3)"><span><br>darkest<br></span><span><br>darkest</span></div> |
|||
<div class="color-col" data-color="var(--primary-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div> |
|||
</div> |
|||
<div class="color-row primary"> |
|||
<div class="color-col" data-color="var(--primary-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div> |
|||
<div class="color-col" data-color="var(--primary-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div> |
|||
<div class="color-col" data-color="var(--primary-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div> |
|||
<div class="color-col" data-color="var(--primary-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div> |
|||
<div class="color-col" data-color="var(--primary)"><span><br>base<br></span><span><br>base</span></div> |
|||
<div class="color-col" data-color="var(--primary-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div> |
|||
<div class="color-col" data-color="var(--primary-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div> |
|||
<div class="color-col" data-color="var(--primary-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div> |
|||
<div class="color-col" data-color="var(--primary-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div> |
|||
</div> |
|||
<div class="color-row secondary"> |
|||
<div class="color-col" data-color="var(--secondary-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lighter-1)"><span><br>lighter-1<br></span><span><br>lighter-1</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lighter-2)"><span><br>lighter-2<br></span><span><br>lighter-2</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lighter-3)"><span><br>lighter-3<br></span><span><br>lighter-3</span></div> |
|||
<div class="color-col" data-color="var(--secondary-light)"><span><br>light<br></span><span><br>light</span></div> |
|||
<div class="color-col" data-color="var(--secondary-light-1)"><span><br>light-1<br></span><span><br>light-1</span></div> |
|||
<div class="color-col" data-color="var(--secondary-light-2)"><span><br>light-2<br></span><span><br>light-2</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lightish-1)"><span><br>lightish-1<br></span><span><br>lightish-1</span></div> |
|||
<div class="color-col" data-color="var(--secondary-lightish-2)"><span><br>lightish-2<br></span><span><br>lightish-2</span></div> |
|||
<div class="color-col" data-color="var(--secondary)"><span><br>base<br></span><span><br>base</span></div> |
|||
</div> |
|||
<div class="color-row secondary"> |
|||
<div class="color-col" data-color="var(--secondary-darkish-2)"><span><br>darkish-1<br></span><span><br>darkish-2</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darkish-1)"><span><br>darkish-1<br></span><span><br>darkish-1</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div> |
|||
<div class="color-col" data-color="var(--secondary-dark-2)"><span><br>dark-2<br></span><span><br>dark-2</span></div> |
|||
<div class="color-col" data-color="var(--secondary-dark-1)"><span><br>dark-1<br></span><span><br>dark-1</span></div> |
|||
<div class="color-col" data-color="var(--secondary-dark)"><span><br>dark<br></span><span><br>dark</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darker-3)"><span><br>darker-3<br></span><span><br>darker-3</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darker-2)"><span><br>darker-2<br></span><span><br>darker-2</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darker-1)"><span><br>darker-1<br></span><span><br>darker-1</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darker)"><span><br>darker<br></span><span><br>darker</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darkest-3)"><span><br>darkest-3<br></span><span><br>darkest-3</span></div> |
|||
<div class="color-col" data-color="var(--secondary-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div> |
|||
</div> |
|||
<div class="color-row secondary"> |
|||
<div class="color-col" data-color="var(--secondary-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div> |
|||
<div class="color-col" data-color="var(--secondary-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div> |
|||
<div class="color-col" data-color="var(--secondary-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div> |
|||
<div class="color-col" data-color="var(--secondary-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div> |
|||
<div class="color-col" data-color="var(--secondary)"><span><br>base<br></span><span><br>base</span></div> |
|||
<div class="color-col" data-color="var(--secondary-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div> |
|||
<div class="color-col" data-color="var(--secondary-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div> |
|||
<div class="color-col" data-color="var(--secondary-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div> |
|||
<div class="color-col" data-color="var(--secondary-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div> |
|||
</div> |
|||
<div class="color-row accent"> |
|||
<div class="color-col" data-color="var(--accent-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div> |
|||
<div class="color-col" data-color="var(--accent-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div> |
|||
<div class="color-col" data-color="var(--accent-light)"><span><br>light<br></span><span><br>light</span></div> |
|||
<div class="color-col" data-color="var(--accent-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div> |
|||
<div class="color-col" data-color="var(--accent)"><span><br>base<br></span><span><br>base</span></div> |
|||
<div class="color-col" data-color="var(--accent-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div> |
|||
<div class="color-col" data-color="var(--accent-dark)"><span><br>dark<br></span><span><br>dark</span></div> |
|||
<div class="color-col" data-color="var(--accent-darker)"><span><br>darker<br></span><span><br>darker</span></div> |
|||
<div class="color-col" data-color="var(--accent-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div> |
|||
</div> |
|||
<div class="color-row accent"> |
|||
<div class="color-col" data-color="var(--accent-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div> |
|||
<div class="color-col" data-color="var(--accent-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div> |
|||
<div class="color-col" data-color="var(--accent-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div> |
|||
<div class="color-col" data-color="var(--accent-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div> |
|||
<div class="color-col" class="color-col" data-color="var(--accent)"><span><br>base<br></span><span><br>base</span></div> |
|||
<div class="color-col" data-color="var(--accent-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div> |
|||
<div class="color-col" data-color="var(--accent-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div> |
|||
<div class="color-col" data-color="var(--accent-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div> |
|||
<div class="color-col" data-color="var(--accent-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div> |
|||
</div> |
|||
<div class="color-row tertiary"> |
|||
<div class="color-col" data-color="var(--tertiary-lightest)"><span><br>lightest<br></span><span><br>lightest</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-lighter)"><span><br>lighter<br></span><span><br>lighter</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-light)"><span><br>light<br></span><span><br>light</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-lightish)"><span><br>lightish<br></span><span><br>lightish</span></div> |
|||
<div class="color-col" data-color="var(--tertiary)"><span><br>base<br></span><span><br>base</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-darkish)"><span><br>darkish<br></span><span><br>darkish</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-dark)"><span><br>dark<br></span><span><br>dark</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-darker)"><span><br>darker<br></span><span><br>darker</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-darkest)"><span><br>darkest<br></span><span><br>darkest</span></div> |
|||
</div> |
|||
<div class="color-row tertiary"> |
|||
<div class="color-col" data-color="var(--tertiary-desaturatedest)"><span><br>desaturatedest<br></span><span><br>desaturatedest</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-desaturateder)"><span><br>desaturateder<br></span><span><br>desaturateder</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-desaturated)"><span><br>desaturated<br></span><span><br>desaturated</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-desaturatedish)"><span><br>desaturatedish<br></span><span><br>desaturatedish</span></div> |
|||
<div class="color-col" data-color="var(--tertiary)"><span><br>base<br></span><span><br>base</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-saturatedish)"><span><br>saturatedish<br></span><span><br>saturatedish</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-saturated)"><span><br>saturated<br></span><span><br>saturated</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-saturateder)"><span><br>saturateder<br></span><span><br>saturateder</span></div> |
|||
<div class="color-col" data-color="var(--tertiary-saturatedest)"><span><br>saturatedest<br></span><span><br>saturatedest</span></div> |
|||
</div> |
|||
<div class="color-row grayscale"> |
|||
<div class="color-col" data-color="var(--white)"><span>White<br></span><span>White</span></div> |
|||
<div class="color-col" data-color="var(--gray-lightest)"><span>Gray lightest<br></span><span>Gray lightest</span></div> |
|||
<div class="color-col" data-color="var(--gray-lighter)"><span>Gray lighter<br></span><span>Gray lighter</span></div> |
|||
<div class="color-col" data-color="var(--gray-light)"><span>Gray light<br></span><span>Gray light</span></div> |
|||
<div class="color-col" data-color="var(--gray-lightish)"><span>Gray lightish<br></span><span>Gray lightish</span></div> |
|||
<div class="color-col" data-color="var(--gray)"><span>Gray<br></span><span>Gray</span></div> |
|||
<div class="color-col" data-color="var(--gray-darkish)"><span>Gray darkish<br></span><span>Gray darkish</span></div> |
|||
<div class="color-col" data-color="var(--gray-dark)"><span>Gray dark<br></span><span>Gray dark</span></div> |
|||
<div class="color-col" data-color="var(--gray-darker)"><span>Gray darker<br></span><span>Gray darker</span></div> |
|||
<div class="color-col" data-color="var(--gray-darkest)"><span>Gray darkest<br></span><span>Gray darkest</span></div> |
|||
<div class="color-col" data-color="var(--black)"><span>Black<br></span><span>Black</span></div> |
|||
</div> |
|||
<div class="color-row"> |
|||
<div class="color-col" data-color="var(--text-light)"><span>Text light<br></span><span>Text light</span></div> |
|||
<div class="color-col" data-color="var(--text-alt)"><span>Text alt<br></span><span>Text alt</span></div> |
|||
<div class="color-col" data-color="var(--text-dark)"><span>Text<br></span><span>Text</span></div> |
|||
<div class="color-col" data-color="var(--text-dark)"><span>Text dark<br></span><span>Text dark</span></div> |
|||
</div> |
|||
</div> |
|||
---- |
---- |
||
Latest revision as of 04:45, 27 December 2020
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
lightest
lighter
lighter
lighter-1
lighter-1
lighter-2
lighter-2
lighter-3
lighter-3
light
light
light-1
light-1
light-2
light-2
lightish
lightish
lightish-1
lightish-1
lightish-2
lightish-2
base
base
darkish-2
darkish-2
darkish-1
darkish-1
darkish
darkish
dark-1
dark-1
dark-2
dark-2
dark
dark
darker-3
darker-3
darker-2
darker-2
darker-1
darker-1
darker
darker
darkest
darkest
darkest
darkest
desaturatedest
desaturatedest
desaturateder
desaturateder
desaturated
desaturated
desaturatedish
desaturatedish
base
base
saturatedish
saturatedish
saturated
saturated
saturateder
saturateder
saturatedest
saturatedest
lightest
lightest
lighter
lighter
lighter-1
lighter-1
lighter-2
lighter-2
lighter-3
lighter-3
light
light
light-1
light-1
light-2
light-2
lightish
lightish
lightish-1
lightish-1
lightish-2
lightish-2
base
base
darkish-1
darkish-2
darkish-1
darkish-1
darkish
darkish
dark-2
dark-2
dark-1
dark-1
dark
dark
darker-3
darker-3
darker-2
darker-2
darker-1
darker-1
darker
darker
darkest-3
darkest-3
darkest
darkest
desaturatedest
desaturatedest
desaturateder
desaturateder
desaturated
desaturated
desaturatedish
desaturatedish
base
base
saturatedish
saturatedish
saturated
saturated
saturateder
saturateder
saturatedest
saturatedest
lightest
lightest
lighter
lighter
light
light
lightish
lightish
base
base
darkish
darkish
dark
dark
darker
darker
darkest
darkest
desaturatedest
desaturatedest
desaturateder
desaturateder
desaturated
desaturated
desaturatedish
desaturatedish
base
base
saturatedish
saturatedish
saturated
saturated
saturateder
saturateder
saturatedest
saturatedest
lightest
lightest
lighter
lighter
light
light
lightish
lightish
base
base
darkish
darkish
dark
dark
darker
darker
darkest
darkest
desaturatedest
desaturatedest
desaturateder
desaturateder
desaturated
desaturated
desaturatedish
desaturatedish
base
base
saturatedish
saturatedish
saturated
saturated
saturateder
saturateder
saturatedest
saturatedest
White
White
White
Gray lightest
Gray lightest
Gray lightest
Gray lighter
Gray lighter
Gray lighter
Gray light
Gray light
Gray light
Gray lightish
Gray lightish
Gray lightish
Gray
Gray
Gray
Gray darkish
Gray darkish
Gray darkish
Gray dark
Gray dark
Gray dark
Gray darker
Gray darker
Gray darker
Gray darkest
Gray darkest
Gray darkest
Black
Black
Black
Text light
Text light
Text light
Text alt
Text alt
Text alt
Text
Text
Text
Text dark
Text dark
Text dark
