mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-23 11:04:40 +00:00
Base: Add accent-color
demo page
Currently this just has checkboxes, though I intend to add support for more things later :^)
This commit is contained in:
parent
cfc9966654
commit
4b3c38e111
70
Base/res/html/misc/accent-color.html
Normal file
70
Base/res/html/misc/accent-color.html
Normal file
|
@ -0,0 +1,70 @@
|
|||
<style>
|
||||
.big {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.color-light {
|
||||
accent-color: wheat;
|
||||
}
|
||||
.color-dark {
|
||||
accent-color: rebeccapurple
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<b>System color</b><br>
|
||||
<input type="checkbox" checked></input>
|
||||
<input type="checkbox" ></input>
|
||||
<input class="indeterminate" type="checkbox"></input>
|
||||
<input type="checkbox" checked disabled></input>
|
||||
<input type="checkbox" disabled></input>
|
||||
<input class="indeterminate" type="checkbox" disabled></input>
|
||||
|
||||
<input class="big" type="checkbox" checked></input>
|
||||
<input class="big" type="checkbox" ></input>
|
||||
<input class="big indeterminate" type="checkbox"></input>
|
||||
<input class="big" type="checkbox" checked disabled></input>
|
||||
<input class="big" type="checkbox" disabled></input>
|
||||
<input class="big indeterminate" type="checkbox" disabled></input>
|
||||
</div>
|
||||
<br>
|
||||
<div class="color-dark">
|
||||
<b>Dark accent color</b><br>
|
||||
<input type="checkbox" checked></input>
|
||||
<input type="checkbox" ></input>
|
||||
<input class="indeterminate" type="checkbox"></input>
|
||||
<input type="checkbox" checked disabled></input>
|
||||
<input type="checkbox" disabled></input>
|
||||
<input class="indeterminate" type="checkbox" disabled></input>
|
||||
|
||||
<input class="big" type="checkbox" checked></input>
|
||||
<input class="big" type="checkbox" ></input>
|
||||
<input class="big indeterminate" type="checkbox"></input>
|
||||
<input class="big" type="checkbox" checked disabled></input>
|
||||
<input class="big" type="checkbox" disabled></input>
|
||||
<input class="big indeterminate" type="checkbox" disabled></input>
|
||||
</div>
|
||||
<br>
|
||||
<div class="color-light">
|
||||
<b>Light accent color</b><br>
|
||||
<input type="checkbox" checked></input>
|
||||
<input type="checkbox" ></input>
|
||||
<input class="indeterminate" type="checkbox"></input>
|
||||
<input type="checkbox" checked disabled></input>
|
||||
<input type="checkbox" disabled></input>
|
||||
<input class="indeterminate" type="checkbox" disabled></input>
|
||||
|
||||
<input class="big" type="checkbox" checked></input>
|
||||
<input class="big" type="checkbox" ></input>
|
||||
<input class="big indeterminate" type="checkbox"></input>
|
||||
<input class="big" type="checkbox" checked disabled></input>
|
||||
<input class="big" type="checkbox" disabled></input>
|
||||
<input class="big indeterminate" type="checkbox" disabled></input>
|
||||
</div>
|
||||
<br>
|
||||
<script>
|
||||
document.querySelectorAll(".indeterminate").forEach(checkbox => {
|
||||
checkbox.indeterminate = true;
|
||||
});
|
||||
|
||||
</script>
|
|
@ -140,6 +140,7 @@
|
|||
<li><a href="transform.html">Transforms</a></li>
|
||||
<li><a href="clip.html">Clip</a></li>
|
||||
<li><a href="cursor.html">Cursor</a></li>
|
||||
<li><a href="accent-color.html">accent-color</a></li>
|
||||
<li><h3>Features</h3></li>
|
||||
<li><a href="css.html">Basic functionality</a></li>
|
||||
<li><a href="colors.html">css colors</a></li>
|
||||
|
|
Loading…
Reference in a new issue