MediaWiki talk:Gadget-colorPalette.css: Difference between revisions

From Portals of Phereon Wiki
Browse history interactively
Content added Content deleted
VisualWikitext
No edit summary
(Replaced content with "== 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-col...")
Tag: Replaced
Line 3: Line 3:
;For example
;For example
:: color: var(--secondary-lightish)
:: color: var(--secondary-lightish)
:: background-color: var(--primary
:: background-color: var(--primary-desaturateder)
----
<div class="color-wrapper">
{{#widget:Color palette}}
<div class="color-row primary">
<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-light)"><br>light</div>
<div style="background-color: var(--primary-lightish)"><br>lightish</div>
<div style="background-color: var(--primary)"><br>base</div>
<div style="background-color: var(--primary-darkish)"><br>darkish</div>
<div style="background-color: var(--primary-dark)"><br>dark</div>
<div style="background-color: var(--primary-darker)"><br>darker</div>
<div style="background-color: var(--primary-darkest)"><br>darkest</div>
</div>
<div class="color-row primary">
<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-desaturated)"><br>desaturated</div>
<div style="background-color: var(--primary-desaturatedish)"><br>desaturatedish</div>
<div style="background-color: var(--primary)"><br>base</div>
<div style="background-color: var(--primary-saturatedish)"><br>saturatedish</div>
<div style="background-color: var(--primary-saturated)"><br>saturated</div>
<div style="background-color: var(--primary-saturateder)"><br>saturateder</div>
<div style="background-color: var(--primary-saturatedest)"><br>saturatedest</div>
</div>
<div class="color-row secondary">
<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-light)"><br>light</div>
<div style="background-color: var(--secondary-lightish)"><br>lightish</div>
<div style="background-color: var(--secondary)"><br>base</div>
<div style="background-color: var(--secondary-darkish)"><br>darkish</div>
<div style="background-color: var(--secondary-dark)"><br>dark</div>
<div style="background-color: var(--secondary-darker)"><br>darker</div>
<div style="background-color: var(--secondary-darkest)"><br>darkest</div>
</div>
<div class="color-row secondary">
<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-desaturated)"><br>desaturated</div>
<div style="background-color: var(--secondary-desaturatedish)"><br>desaturatedish</div>
<div style="background-color: var(--secondary)"><br>base</div>
<div style="background-color: var(--secondary-saturatedish)"><br>saturatedish</div>
<div style="background-color: var(--secondary-saturated)"><br>saturated</div>
<div style="background-color: var(--secondary-saturateder)"><br>saturateder</div>
<div style="background-color: var(--secondary-saturatedest)"><br>saturatedest</div>
</div>
<div class="color-row accent">
<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-light)"><br>light</div>
<div style="background-color: var(--accent-lightish)"><br>lightish</div>
<div style="background-color: var(--accent)"><br>base</div>
<div style="background-color: var(--accent-darkish)"><br>darkish</div>
<div style="background-color: var(--accent-dark)"><br>dark</div>
<div style="background-color: var(--accent-darker)"><br>darker</div>
<div style="background-color: var(--accent-darkest)"><br>darkest</div>
</div>
<div class="color-row accent">
<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-desaturated)"><br>desaturated</div>
<div style="background-color: var(--accent-desaturatedish)"><br>desaturatedish</div>
<div style="background-color: var(--accent)"><br>base</div>
<div style="background-color: var(--accent-saturatedish)"><br>saturatedish</div>
<div style="background-color: var(--accent-saturated)"><br>saturated</div>
<div style="background-color: var(--accent-saturateder)"><br>saturateder</div>
<div style="background-color: var(--accent-saturatedest)"><br>saturatedest</div>
</div>
</div>
{{#css:
.color-wrapper {
overflow: auto;
}

.color-row {
display: flex;
flex-direction: row;
}

.color-row > div {
color: white;
text-align: center;
height: 100px;
flex: 1 0 100px;
}

.color-row.primary > div::before {
content: "Primary";
}
.color-row.secondary > div::before {
content: "Secondary";
}
.color-row.Accent > div::before {
content: "Accent";
}
}}

Revision as of 16:24, 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)

{{#widget:Color palette}}

Retrieved from "https://www.portalsofphereon.com/wiki/MediaWiki_talk:Gadget-colorPalette.css?oldid=4143"