RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 09:37:45 +00:00
Code Issues Activity Actions

Base: Add accent-color demo page

Browse source 
Currently this just has checkboxes, though I intend to add support
for more things later :^)
This commit is contained in:
MacDue 2023-03-20 00:11:52 +00:00 • committed by Sam Atkins
parent cfc9966654
commit 4b3c38e111
2 changed files with 71 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

70
Base/res/html/misc/accent-color.html Normal file
View 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>

1
Base/res/html/misc/welcome.html
View file

@ -140,6 +140,7 @@
<li><a href="transform.html">Transforms</a></li> <li><a href="transform.html">Transforms</a></li>
<li><a href="clip.html">Clip</a></li> <li><a href="clip.html">Clip</a></li>
<li><a href="cursor.html">Cursor</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><h3>Features</h3></li>
<li><a href="css.html">Basic functionality</a></li> <li><a href="css.html">Basic functionality</a></li>
<li><a href="colors.html">css colors</a></li> <li><a href="colors.html">css colors</a></li>