MediaWiki talk:Gadget-colorPalette.css: Difference between revisions
From Portals of Phereon Wiki
Content added Content deleted
mNo edit summary |
mNo edit summary |
||
| Line 20: | Line 20: | ||
text-align: center; |
text-align: center; |
||
height: 150px; |
height: 150px; |
||
flex: 1 0 |
flex: 1 0 100px; |
||
} |
} |
||
.color-row.grayscale > div { |
.color-row.grayscale > div { |
||
flex: 1 0 0px; |
flex: 1 0 0px; |
||
} |
} |
||
.color-row.primary span::before { |
.color-row.primary span:nth-child(1)::before, .color-row.primary span:nth-child(2)::before { |
||
content: "Primary"; |
content: "Primary"; |
||
} |
} |
||
.color-row.secondary span::before { |
.color-row.secondary span:nth-child(1)::before, .color-row.secondary span:nth-child(2)::before { |
||
content: "Secondary"; |
content: "Secondary"; |
||
} |
} |
||
.color-row.tertiary span::before { |
.color-row.tertiary span:nth-child(1)::before, .color-row.tertiary span:nth-child(2)::before { |
||
content: "Tertiary"; |
content: "Tertiary"; |
||
} |
} |
||
.color-row.accent span::before { |
.color-row.accent span:nth-child(1)::before, .color-row.accent span:nth-child(2)::before { |
||
content: "Accent"; |
content: "Accent"; |
||
} |
} |
||
Revision as of 08:45, 26 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
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
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
